22
2013-08

解决IE浏览器不支持li标签hover属性,以及IE浏览器不支持margin-top负值的情况

今天偶然想到一个css样式效果,就是给li标签添加一个背景并变大,感觉好像有一种动画的效果一样,想用在以后的列表中,但是其他浏览器都支持li标签的hover属性,但是IE浏览器都不支持,找了好多种办法,终于找到了一种,就是利用一下代码中的js来让li标签在IE浏览器下支持hover属性。

但是这个问题解决之后,又出现另一个问题,就是IE浏览器不支持margin-top的负值情况,于是我就在样式后面增加了postion:relative,然后就可以了,如果你也遇到了这种情况,就赶快试试以下代码吧!

<script language="javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
   for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
    {
    cssRule = document.styleSheets[i].rules[x];
    if (cssRule.selectorText.indexOf("LI:hover") != -1)
    {
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
     document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
    }
   }
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
   getElm[i].onmouseover=function() {
    this.className+=" iehover";
   }
   getElm[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
   }
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
 <style type="text/css">
.test{width:auto; height:20px; line-height:15px;}
.test ul li{width:10px; height:10px; font-size:0; background:green; list-style:none; float:left; line-height:15px; border-right:1px solid #fff;}
.test ul li:hover{width:20px; height:15px; background:green; line-height:15px; margin-top:-2px; cursor:pointer; position:relative}
 </style>
  <div class="test" id="nav">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </div>

除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/210.html

评论列表:

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量