我正在使用 this blog 中提到的向导的漂亮风格 但不幸的是,它在 IE 中效果不佳,因为如博客中所述:
对于不支持 :after/:before/nth-child 的浏览器,该代码将无法运行。
那么有什么办法可以解决这个问题,使其在IE浏览器中正常运行。
仅供引用,CSS 是:
#wizHeader li .prevStep
{
background-color: #669966;
}
#wizHeader li .prevStep:after
{
border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
background-color: #C36615;
}
#wizHeader li .currentStep:after
{
border-left-color: #C36615 !important;
}
#wizHeader li .nextStep
{
background-color:#C2C2C2;
}
#wizHeader li .nextStep:after
{
border-left-color:#C2C2C2 !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 50px;
}
#wizHeader li a:hover
{
background: #FE9400;
}
#wizHeader li a:hover:after
{
border-left-color: #FE9400 !important;
}
.content
{
height:150px;
padding-top:75px;
text-align:center;
background-color:#F9F9F9;
font-size:48px;
}
最佳答案
前后 css 元素应该在 ie8 及更高版本中工作。
对于 IE7,您可以使用类似使用 IE7.js 的东西在伪元素支持之后和之前添加 hack。
我建议使用条件语句来包含文件,例如;
<!--[if IE 7]>
insert script here
<![endif]-->
对于 IE6,我个人不会打扰,只是优雅地降级。
另一个选项是 to use ie-css3.js .
关于asp.net - 在 : and before: selectors in versions 6 and 7 of Internet Explorer 之后使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8412326/