高级CSS无法在任何版本的IE中使用
JSFiddle，根据要求：http://jsfiddle.net/Es8PK/
所以我正在建立一个带有单一通用样式表的网站。这张表有大约40个不同的命令（如果这是正确的词），它们在每个版本的浏览器中完全按照预期工作，包括IE 8及更高版本。但是，我的网站上有两个特殊功能，即每页顶部的自定义按钮，以及一个页面上的特殊导航栏。这两个功能都拒绝在任何版本的IE中工作，即使我已经使用caniuse.com进行了检查，并且IE 11支持其中的每个命令（这都不起作用）。这是样式表中不起作用的部分，然后是使用这些部分的html：
CSS：
/* BUTTONS IN HEADER */
.button {
/* text */
text-decoration: none;
font: 16px/1em 'Droid Sans', sans-serif;
font-weight: bold;
text-shadow: rgba(255,255,255,.5) 0 1px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* layout */
padding: .5em .6em .4em .6em;
margin: .5em;
display: inline-block;
position: relative;
-webkit-border-radius: 8px;
border-radius: 8px;
/* effects */
border-top: 1px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.1);
background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -ms-radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
/* color */
color: hsl(0, 0%, 40%) !important;
background-color: hsl(0, 0%, 75%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.round, .round:after {
border-top: none;
-webkit-border-radius: 1em;
border-radius: 1em;
}
.button.blue {
color: hsl(208, 50%, 40%) !important;
background-color: hsl(208, 100%, 75%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.blue:hover { background-color: hsl(208, 100%, 83%); }
.button:focus {
outline: none;
color: rgba(254,255,255,0.9) !important;
text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}
.button.disabled, .button.disabled:hover {
opacity: .5;
cursor: default;
color: rgba(0,0,0,0.2) !important;
text-shadow: none !important;
background-color: rgba(0,0,0,0.05);
background-image: none;
border-top: none;
-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.button:active {
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-webkit-transform: translateY(.2em);
-ms-transform: translateY(.2em);
transform: translateY(.2em);
}
/* NAVIGATION BAR */
nav {
text-align: center;
margin: 20px 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background-image: linear-gradient(to top, #FFFFFF 0%, #3366FF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li#LastOne {
position: relative;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(to top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 30px;
color: #0000FF;
text-decoration: none;
font-weight: bold;
text-shadow: 2px 2px 12px #000;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
text-align: left;
}
nav ul ul#BestOne {
position: absolute;
right: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
white-space: nowrap;
}
nav ul ul li a {
padding: 15px 15.5px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
HTML（按钮）：
<div id="contain2">
<br /><hr>
<a role="button" class="button round disabled">Home</a>
<a href="Software.html" role="button" class="button round blue">Software</a>
<a href="Support.html" role="button" class="button round blue">Support</a>
<a href="Consulting.html" role="button" class="button round blue">Consulting Services</a>
<a href="New.html" role="button" class="button round blue">What's New</a>
<a href="Clients.html" role="button" class="button round blue">Our Clients</a>
<a href="About.html" role="button" class="button round blue">About Us</a>
<a href="Contact.html" role="button" class="button round blue">Contact Us</a>
</div>
HTML（导航栏）：
<nav>
<ul>
<li><a href="Seminars.html">Seminars and Training</a>
<ul>
<li><a href="Seminars.html#S1">New User Training</a></li>
<li><a href="Seminars.html#S2">Making the Most of TCE</a></li>
<li><a href="Seminars.html#S3">Cash Management Workshop</a></li>
<li><a href="Seminars.html#S4">System Manager Training</a></li>
<li><a href="Seminars.html#S5">Service Management Workshop</a></li>
<li><a href="Seminars.html#S6">Advanced System Manager Training</a></li>
</ul></li>
<li><a href="PeerWork.html">Peer Work Groups</a>
<ul>
<li><a href="PeerWork.html#P1">Operational Audit Groups</a></li>
<li><a href="PeerWork.html#P2">Sales Manager Work Group</a></li>
<li><a href="PeerWork.html#P3">Management Work Study Group</a></li>
<li><a href="PeerWork.html#P4">System Manager Work Group</a></li>
</ul></li>
<li><a href="OnLineUser.html">On-Line User Groups</a>
<ul>
<li><a href="OnLineUser.html#O1">Prospector Pro User Groups</a></li>
<li><a href="OnLineUser.html#O2">System Manager User Groups</a></li>
<li><a href="OnLineUser.html#O3">Service & Parts User Group</a></li>
<li><a href="OnLineUser.html#O4">Owner/CEO User Group</a></li>
</ul></li>
<li><a href="Coaching.html">Coaching Services</a>
<ul>
<li><a href="Coaching.html#C1">Financial Analysis and Review</a></li>
<li><a href="Coaching.html#C2">Adjusting Your Inventory</a></li>
<li><a href="Coaching.html#C3">Finding Retail Lending Sources</a></li>
<li><a href="Coaching.html#C4">Obtaining Wholesale Inventory Financing</a></li>
<li><a href="Coaching.html#C5">Building a Buy-Here / Pay-Here Portfolio</a></li>
</ul></li>
<li id="LastOne"><a href="Webinars.html">Webinars</a>
<ul id="BestOne">
<li><a href="Webinars.html#W1">Obtaining Whole Sale Inventory Financing</a></li>
<li><a href="Webinars.html#W2">Managing Service to Generate Cash</a></li>
<li><a href="Webinars.html#W3">Generating Sales in a Down Market</a></li>
<li><a href="Webinars.html#W4">Stealing Market Share through better CRM</a></li>
</ul></li>
</ul>
</nav>
我意识到这是很多代码，但我想确保任何愿意尝试帮助我的人都有他们可能需要的一切来推断出答案。另外，我使用Komodo Edit来编写我的代码，并且在那里它显示了我在webkit和ms的所有情况下的背景图像的CSS中的可能错误，以及大约一半的moz和常规的情况，所以这样做是一个好的开始。请注意，所有这些都适用于所有其他浏览器，但不适用于我拥有的任何IE版本（8,9,11）。
Chrome中的内容：
在IE中看起来像什么：
1 个答案:
答案 0 :(得分：0)
对于旧版IE使用不同的css怎么样？ 你可以通过在头部分的html文档中放置这种标记来实现这一点：
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
此代码使用另一个css文件用于较低版本的IE版本9的浏览器。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？