在那些正常的浏览器下,如果我对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;}