发现IE的一个bug,HTML元素<li>显示bug
IE的HTML元素<li>显示bug
注意Item 3和Item 4之间有空格和换行。在IE中显示Item 3内容要宽一些,但是在Firefox中Item 3与后面有一个大间隙。
个人分析,IE的处理不对,IE是照着html规范认为li可以没有结束标记</li>,也就不理会</li>, 把li的内容一直计算到下一个<li>开始点,所以就包含了空格。
<html>
<head>
<style type="text/css">
#tabs{
border:2px solid #0000FF;
border-bottom:2px inset #808080;
border-top:0px;
margin-bottom:2px;
padding-bottom:6px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
}
#tabs ul{
border:1px solid #FF0000;
display:inline;
margin:0px 0px 0px 0px;
padding-bottom:0px;
padding-left:0px;
padding-top:0px;
}
#tabs ul li{
background-color:#B3C2C5;
border-bottom:1px solid ThreedShadow;
border-left:1px solid #CCCCCC;
border-right:1px outset #666666;
border-top:1px solid ThreedShadow;
display: inline;
list-style-type:none;
margin:0px 0px 0px 0px;
padding: 2px 5px 2px 5px;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
<li class="">Item 4</li><li>Item 5</li></ul>
</div>
</body>
</html>
问题点数:0、回复次数:5Top
1 楼jerryhst()回复于 2006-03-05 23:14:16 得分 0
upTop
2 楼kafly(王者)回复于 2006-03-07 08:53:26 得分 0
ThreedShadow 的问题吧,算BUG?Top
3 楼crazy_he(天煞孤星)回复于 2006-03-07 18:01:26 得分 0
你自己在item3和4之间加了一个硬回车Top
4 楼tx18(www.sqlserver.com.cn)回复于 2006-03-07 18:40:48 得分 0
upTop
5 楼zxfly()回复于 2006-03-08 08:00:19 得分 0
crazy_he(天煞孤星)说得对
要不你就在li中加上float:left;然后你就可以在代码中换行了,不过之后的浮动属性注意清除Top




