您不能在 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:比率(90度)
*,
*: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 中测试工作正常。也许这不是最好的解决方案,但我希望它可以帮助您在您的网站中使用。