[英]Jquery + Selectivizer to reproduce nth-child in IE8
My understanding from selectivizr is that it can interpret a number of pseudo-classes correctly in ie6-8. 我对selectivizr的理解是,它可以在ie6-8中正确解释许多伪类。 I've been having trouble with what I want to accomplish, no matter what I try, it runs perfectly in Chrome/Firefox but falls flat on its face in IE6. 无论我尝试什么,我都难以解决要完成的工作,它可以在Chrome / Firefox中完美运行,但在IE6中却无能为力。 Any help would be awesome! 任何帮助都是极好的!
CSS 的CSS
#menu li img
{
position: absolute;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#menu li:nth-child(odd) img
{
top: 0px;
}
#menu li:nth-child(even) img
{
bottom: 0px;
}
#menu li span
{
position: absolute;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 5px;
}
#menu li:nth-child(odd) span
{
top: 150px;
}
#menu li:nth-child(even) span
{
bottom: 150px;
}
Jquery/Selectivizer: jQuery /选择器:
<script language="JavaScript" src="jquery-1.8.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script language="JavaScript" src="selectivizr-min.js"></script>
<![endif]-->
HTML 的HTML
<li><img src="menu/menu01-01.jpg" /><span>過橋米線 NT.100</span></li><li>
<img src="menu/menu01-02.jpg" /><span>昆明辣泡菜鍋米干/米線 NT.100</span></li><li>
<img src="menu/menu01-03.jpg" /><span>阿美米干/米線 NT.80</span></li><li>
<img src="menu/menu01-04.jpg" /><span>雲燒牛腩米干/米線 NT.100</span></li><li>
<img src="menu/menu01-05.jpg" /><span>豆腐乳/臘肉炒飯 NT.80</span></li>
Did you put all your css in a link rel? 您是否将所有CSS都放在链接rel中? Selectivizr will not work with css in style blocks. Selectivizr将无法在样式块中使用CSS。 I simplified and this works, proving that even and odd work alone in selectivizr. 我简化了这项工作,证明了selectivizr中仅偶数和奇数工作。
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="selectivizr.css" type="text/css" />
</head>
<body>
<ul>
<li><span>過橋米線 NT.100</span></li>
<li><span>昆明辣泡菜鍋米干/米線 NT.100</span></li>
<li><span>阿美米干/米線 NT.80</span></li>
<li><span>雲燒牛腩米干/米線 NT.100</span></li>
<li><span>豆腐乳/臘肉炒飯 NT.80</span></li>
</ul>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.