我得到了一个带有下拉菜单的 90 度旋转菜单设计。当然，我已经在除 IE8 之外的所有浏览器中使用它(我们不会针对任何更低版本进行优化)。
这是临时站点:http://williamsandports.com/wp/
#navbar 元素本身可以很好地旋转
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
使用很棒的内置 IE“开发者工具”，我发现最外面的 ul 也就是 #menu-main-menu 仍然没有旋转和挂起在屏幕顶部，因此无法与下拉元素正确交互。
有什么建议吗？我会采取任何修复、css、js 等任何方法来完成这个，当然除了静态图像 :) 您可以在 FF 或 Chrome 中查看同一个站点，看看完成的解决方案应该是什么样子。
最佳答案
您不能在 IE8 中使用转换。您可以了解更多:http://caniuse.com/#search=transform . 如果你想旋转你的网站。您可以为 IE8 使用静态图像和 css Sprite 。这是演示，我修复了 IE 8 解决方案旋转。
HTML
<!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>
CSS
- stylesheet.css: 使用-webkit-transform: ratate(90deg)
*,
*: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; }
- ie.css:修复当您使用 IE8 时(使用图像和 css sprites)
.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; }
图片:
我在 IE8 中测试工作正常。也许这不是最佳解决方案，但我希望它可以帮助您在您的网站中使用。
关于javascript - CSS 导航菜单在 IE8 中无法正确旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16703459/