Jquery + Selectivizer在IE8中重现nth-child

时间:2012-09-14 10:07:48

标签: jquery internet-explorer-8 css-selectors selectivizr

我对选择性的理解是,它可以在ie6-8中正确地解释许多伪类。我一直无法完成我想要完成的任务,无论我尝试什么,它在Chrome / Firefox中完美运行,但在IE6中却表现不佳。任何帮助都会很棒!

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:

<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

<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>

1 个答案:

答案 0 :(得分:0)

你把所有的css都放在链接rel中了吗? Selectivizr不会在样式块中使用css。我简化了,这很有效,证明了选择中的单独和奇怪的工作。

<!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>
相关问题