|
如何解決“橫向撐開”問題
用“word-wrap: break-word”解決：
導(dǎo)致布局混亂的主要原因，是IE6對overflow的visible的錯(cuò)誤解釋，才導(dǎo)致寬度被“撐開”才造成的。所以，我們必須采取措施，讓IE6中容器不能那么“放縱孩子”才可以。方法就是使用“word-wrap: break-word”樣式（IE特有，F(xiàn)ireFox不起任何作用），強(qiáng)制要求容器內(nèi)的內(nèi)容不允許“撐開”父容器。下面的示例可能有助于理解。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="</div>
</body>
</html> 利用“word-wrap: break-word”可以讓IE6中的“孩子”乖乖的待在“父親”的允許訪問內(nèi)。如下圖所示：
利用“word-wrap: break-word”后，即使在IE6中，容器也不再被“撐開”
用“overflow: hidden”解決：
顯然，用“word-wrap: break-word”又導(dǎo)致了IE（IE6和IE7）和FireFox的顯示結(jié)果新的不一致。那還有沒有其他的辦法呢？“擒賊先擒王”，既然是“overflow: visible”導(dǎo)致的bug，那直接改變“overflow”的值不就可以了嗎？所以，使用“overflow: hidden”便能讓IE6、IE7和FireFox顯示一直。下面的這個(gè)示例，可能會(huì)有助于你的理解：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="</div>
</body>
</html>
下面是在IE6、IE7和FireFox中的現(xiàn)實(shí)效果截圖：
IE6、IE7和FireFox中終于顯示一致了
出處：
責(zé)任編輯：bluehearts
上一頁 引起頁面布局混亂的禍?zhǔn)?[5] 下一頁 引起頁面布局混亂的禍?zhǔn)?[7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 引起頁面布局混亂的禍?zhǔn)?[6]
