当前位置：首页 → 问答吧 → 吐血的浏览器兼容性问题，望高人指点明路。

吐血的浏览器兼容性问题，望高人指点明路。

时间：2011-04-07

来源：互联网

如下代码。a标记宽度50px , a外围box宽度250px,在一列装有5个设为宽度为50px的时候，出现最末端剩余2个不按左浮动排列，如果有2排以上则始终为最后一列出现不规则排列，FF浏览器正常，IE最后2个a块排列混乱。
要求解决方案为不允许增加外围box宽度，同理不允许减少a标记宽度。
在a=50px ，外围box要求50*5=250px 。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; crrrset=gb2312" />
<title>rrr</title>
<style type="text/css">
a{
COLOR: #000000;
TEXT-DECORATION: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
a:hover { COLOR: #FF0000; TEXT-DECORATION: underline }
#rr{
margin-right: auto;
margin-left: auto;
width: 802px;
}
#rr a{
width: 60px;
height: 33px;
float: left;
list-style-type: none;
}
#rr .dd{
float: left;
width: 300px;
height: 50px;
border: 1px solid #C4E0FD;
}
</style>
</head>
<body>
<div id="rr">
<div class="dd"><a>1</a><a>2</a></a><a>3</a></a><a>4</a></a><a>5</a></a><a>1</a><a>2</a></a><a>3</a></a><a>4</a></a><a>5</a></a></div>
</div>
</body>
</html>

作者: df_zzr 发布时间: 2011-04-07

貌似是因为你a标签比较乱，嵌套不正确
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; crrrset=gb2312" />
<title>rrr</title>
<style type="text/css">

a{
COLOR: #000000;
TEXT-DECORATION: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
a:hover { COLOR: #FF0000; TEXT-DECORATION: underline }
#rr{
margin-right: auto;
margin-left: auto;
width: 802px;
}
#rr a{
width: 60px;
height: 33px;
float: left;
list-style-type: none;
}
#rr .dd{
float: left;
width: 300px;
height: 50px;
border: 1px solid #C4E0FD;
}
</style>
</head>
<body>
<div id="rr">
<div class="dd"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a></div>
</div>
</body>
</html>

作者: hongmei85 发布时间: 2011-04-07

引用 1 楼 hongmei85 的回复:
貌似是因为你a标签比较乱，嵌套不正确

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
……

不关标签问题确实是bug
你这样排一下问题就出来了，
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>5</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>

作者: df_zzr 发布时间: 2011-04-07

横排确实没事，但是换行问题就出来了。

作者: df_zzr 发布时间: 2011-04-07

其中任何一个a标签换行就会出现排列错乱。。。

作者: df_zzr 发布时间: 2011-04-07