Javascript CSS导航菜单在IE8中无法正确旋转
我得到了一个90度旋转菜单的设计,里面有下拉菜单。当然,除了IE8之外,我已经让它在每一个浏览器中都能正常工作。我们不会为任何更低的浏览器进行优化 这是临时站点: 导航栏元素本身使用Javascript CSS导航菜单在IE8中无法正确旋转,javascript,css,internet-explorer,Javascript,Css,Internet Explorer,我得到了一个90度旋转菜单的设计,里面有下拉菜单。当然,除了IE8之外,我已经让它在每一个浏览器中都能正常工作。我们不会为任何更低的浏览器进行优化 这是临时站点: 导航栏元素本身使用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 使用令人敬畏的内置IE开发工具,我发现最外层的ul菜单主菜单仍然未旋转,挂在屏幕顶部,因此下拉元素无法正确交互 有人吗?当然,除了静态图像,我会采取任何修复,css,js,任何东西来
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
使用令人敬畏的内置IE开发工具,我发现最外层的ul菜单主菜单仍然未旋转,挂在屏幕顶部,因此下拉元素无法正确交互
有人吗?当然,除了静态图像,我会采取任何修复,css,js,任何东西来完成这一个:你可以在FF或Chrome中查看同一个站点,看看完成的解决方案应该是什么样子。你不能在IE8中使用transform。您可以找到更多:。 如果你想旋转,比如你的网站。您可以在IE8中使用静态图像和css精灵。这是演示,我修复了IE8解决方案 HTML -css:修复当你使用IE8时使用图像和css精灵 图像:
我在IE8测试中表现良好。也许这不是最好的解决方案,但我希望它能帮助您在站点中使用。在IE8模式下的IE9调试控制台中,通过限制ulmenu主菜单的宽度并将旋转过滤器应用于其s,我获得了最佳结果。抗锯齿像胡佛一样糟糕,但这只是一个开始;这实际上帮了大忙,谢谢你的关注。迫不及待地想知道IE 8已经成为过去。。。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solution rotate in IE8</title>
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="nav-bar">
<ul class="navigation">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About Us</a></li>
<li><a href="#" class="portfolio">Portfolio</a></li>
<li><a href="#" class="process">Our Process</a></li>
<li><a href="#" class="client">Client List</a></li>
<li><a href="#" class="consultation">Consultation</a></li>
<li><a href="#" class="contact">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.container {
width: 900px;
margin-left: auto;
margin-right: auto; }
.nav-bar {
width: 100%;
position: relative; }
.nav-bar:before, .nav-bar:after {
content: "";
display: table; }
.nav-bar:after {
clear: both; }
.nav-bar {
*zoom: 1; }
.navigation {
background-color: #f2f2f2;
padding: 10px;
width: 100%;
position: absolute;
left: 40px;
top: 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 0 0; }
.navigation li {
display: inline-block; }
.navigation a {
color: #825a13;
font-weight: 700;
padding: 10px;
text-decoration: none;
text-transform: uppercase; }
.navigation {
background-color: transparent;
width: 40px; }
.navigation li {
display: block;
float: left; }
.navigation a {
background: url(../img/nav.png) no-repeat;
display: block;
text-indent: -9999px;
width: 40px;
height: 118px; }
.navigation a.home {
background-position: 0 0;
height: 75px; }
.navigation a.about {
background-position: 0 -86px;
height: 90px; }
.navigation a.portfolio {
background-position: 0 -187px;
height: 101px; }
.navigation a.process {
background-position: 0 -299px; }
.navigation a.client {
background-position: 0 -435px; }
.navigation a.consultation {
background-position: 0 -571px; }
.navigation a.contact {
background-position: 0 -706px; }