|
表面原因——放縱的孩子和嚴厲的父親
在2007年5月份的時候，我曾經(jīng)寫過一篇文章，叫做《IE6與IE7，放縱的孩子與嚴厲的父親》。當時技術水平和對web標準的認知有限，所以寫出來的這篇文章，雖然從表面合理的解釋了造成布局混亂的原因，但是并沒有說到根本上去。可謂“只知其一，不知其二”，但是這里依然推薦你閱讀一篇。因為“先知其一，再知其二”將更有助于這“其二”的原因。
“其二”原因——IE6對“overflow:visible”的誤解
為了兼顧到對overflow可能還不是很了解到朋友，這里是關于overflow樣式的一些資料：W3C關于overflow的資料。請注意W3C對于visible參數(shù)的解釋：
Visible： "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box（注：后面這句可能是后續(xù)版本補充上來的）".
注意，w3c只是說，超出容器的內(nèi)部不會被剪切。但是它并沒有說，超出來的內(nèi)容可以“撐開”容器。所以下面這個例子中IE7和FireFox的解釋和渲染是正確的，而IE6則是錯誤的（因為它錯誤的認為，只有讓容器內(nèi)的內(nèi)容“撐開”容器，才能讓容器內(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標準,楊正祎,博客園,實例代碼" />
<meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="</div>
</body>
</html>
下面是上面示例分別在IE6，IE7，F(xiàn)ireFox（版本2.0.0，12）和Oepra（版本9.25）中的顯示效果截圖（IE6和IE7共存的方法，可以參考文章《IE6和IE7共存方法（別人是別人的，我是我的）》）。
顯然只有IE6的渲染結(jié)果是“另類”的
從圖片中我們可以看到IE7和FireFox的渲染結(jié)果是一樣，IE6是個“壞孩子”，就不多說了，而Oepra的渲染結(jié)果和FireFox以及IE7也是有點差距的。但是這不是因為對overflow樣式的理解有誤差造成的，所以這里也不再扯開話題了。
出處：
責任編輯：bluehearts
上一頁 引起頁面布局混亂的禍首 [3] 下一頁 引起頁面布局混亂的禍首 [5]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 引起頁面布局混亂的禍首 [4]
