|
另一個“焦油坑”——“縱向撐開”
上面解決方法，只是“橫向”的、寬度的問題，其實“‘overflow:visible’IE6渲染bug”，同樣也會引起縱向的、高度方面的頁面布局混亂。解決“縱向撐開bug”和解決“橫向撐開bug”需要采用完全不同的解決方案。但是，相比“縱向撐開bug”解決方案，“橫向撐開bug”解決方案卻簡單很多——只要我們讓IE7和FireFox，也能像IE6中那樣根據(jù)內(nèi)容，自適應(yīng)高度即可。如何才能讓容器在IE7和FireFox中能夠自適應(yīng)高度呢？其實很簡單，也是IE7的重要改進之一，使用“min-height”樣式。雖然IE7中已經(jīng)支持“min-height/min-width”和"max-height/max-width"樣式。但是IE6卻不認(rèn)識這些"min-"、"max-"開頭的樣式，所以，我們還需要使用一個css hack為IE6設(shè)置一個“height”，只讓IE6認(rèn)識，IE7和FireFox都不認(rèn)識。通過這篇文章 《實例講解符合中國特色的和網(wǎng)絡(luò)現(xiàn)狀的實用CSS Hack(附源碼)》 便可以找到應(yīng)該使用的css hack。下面的示例可能會有助于你理解此解決方法：
<!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),楊正祎,博客園,實例代碼" />
<meta name="Description" content="這是一個簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁面</title>
<style>
* { margin: 0; padding: 0; }
#header {
width: 600px;
/*height:50px;注釋掉下面兩句，放出這一句，在FireFox和IE7中便能呈現(xiàn)bug*/
min-height:50px;/*只設(shè)置最小高度，讓IE7和FireFox自適應(yīng)高度*/
_height: 50px;/*采用只有IE6才認(rèn)識到css hack，讓不認(rèn)識min-height的IE6也有很好的兼容性。*/
background-color: red;
margin:0 auto;/*居中顯示*/
}
#body{
width:600px;
margin:0 auto;/*居中顯示*/
background-color:blue;
}
#footer{
width:600px;
margin:0 auto;
background-color:#666;
clear:both;/*clear:both，讓footer在新的一行顯示，很多朋友對clear理解的不夠透徹，我以后會特意出篇文章介紹這個樣式，有興趣的朋友可以關(guān)注我的博客http://justinyoung.cnblogs.com*/
}
</style>
</head>
<body>
<div id="header">
這里是頭部的內(nèi)容。<br/>
可能有網(wǎng)站標(biāo)題，就像<a target="_blank" href="" title="">博客園</a>博客的標(biāo)題、副標(biāo)題。<br/>
也可能有導(dǎo)航欄在這里<br/>
<strong>注意這句話在IE7中的顯示1</strong><br/>
<strong>注意這句話在IE7中的顯示2</strong><br/>
</div>
<div id="body">
這里是主體的內(nèi)容，隨便你寫啦。我就寫上我的博客地址吧——<a target="_blank" href=" <p> 專注于B/S模式的項目。姓名：楊正祎(Justin Young)，程序員，專注于B/S模式的項目開發(fā)，擅長于Web標(biāo)準(zhǔn)頁面設(shè)計。</p>
<p>歡迎你們來為我的博客做客哦，里面有很多關(guān)于web標(biāo)準(zhǔn)方面的文章哦。請你們多多指教。</p>
<p>最后還要非常華麗的署名——楊正祎</p>
<p>日期當(dāng)然也不能少啦——2008-2-21</p>
</div><!--end: body -->
<div id="footer">
這里是footer，就放一些版權(quán)信息吧。©<a target="_blank" href="</div><!--end: footer -->
</body>
</html>
下面是修正后頁面的效果截圖，在IE6、IE7和FireFox總都是令人滿意的顯示結(jié)果：
利用min-height和css hack讓容器在IE7和FireFox中自適應(yīng)高度
后記
對于最容易引起網(wǎng)頁布局混亂的“‘overflow:visible’IE6渲染bug”，上面從多個方向和角度進行了講解。雖然有些方面還不能有完美的解決方案，但是在更理性的解決方案出現(xiàn)之前，暫時也是沒有辦法的事情，只能留個遺憾在那里，因為我們還要繼續(xù)前進……
本文鏈接：http://www.95time.cn/tech/web/2008/6116.asp 
出處：
責(zé)任編輯：bluehearts
上一頁 引起頁面布局混亂的禍?zhǔn)?[7] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 引起頁面布局混亂的禍?zhǔn)?[8]
