【兼容ie6笔记】当li为父级元素,子级元素使用了position:absolute,并用left定位时

最新推荐文章于 2025-11-14 15:57:30 发布

转载最新推荐文章于 2025-11-14 15:57:30 发布 · 861 阅读

文章标签：

#ie #jquery #function #url #浏览器 #html

前端开发专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何在正常的浏览器中为ul中的li元素添加圆角效果，并针对IE6浏览器进行了CSS优化，通过使用hack属性和overflow属性解决了在IE6中的显示问题。

在那些正常的浏览器下，如果我对ul中的li的左部实现圆角效果:

html部分:

<ul>
	<li>
<a href="http://xxx.net">xxx.net</a></li>
</ul>

css部分:

ul li {
text-align:center;
display:block;
position:relative;
padding:10px;
}
ul li .corner{
background-image:url(images/8pxout.png);
width:8px;
height:8px;
}
ul li .tl{background-position:0 0;}
ul li .bl{background-position:0 -8px;}

js部分(jQuery写的):

$("ul li").each(function(){
var h_li=parseFloat($(this).height())+20;
$(this).children(".tl").css("top","0px").css("left","0");
$(this).children(".bl").css("top",(h_li-8)+"px").css("left","0");
});

效果很容易就实现了，但是在脑残IE6中，效果明显出现了偏差，所以，需要做一些修改：

css部分:

ul li {
      text-align:center;
      display:block;
      position:relative;
      padding:10px;
      _zoom:1;
}/*使用了HACK,添加了只有IE6能识别的_zoom属性*/
ul li .corner{
      background-image:url(images/8pxout.png);
      width:8px;
      height:8px;
      overflow:hidden;
}/*添加了overflow属性，否则在IE6下，背景将重复出现*/
ul li .tl{background-position:0 0;}
ul li .bl{background-position:0 -8px;}