亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

IE7與web標準設計（3）

互聯(lián)網(wǎng)   發(fā)布時間：2008-10-17 19:26:13   作者：佚名   我要評論
上文：IE7與web標準設計（2） IE歷來被web標準的擁護者所詬病，而當FireFox橫空出世以后，更多的網(wǎng)頁制作者開始關注web標準設計。看著FireFox的市場占有率不停的上升，微軟終于推出了IE7。但IE7是否真的能夠力挽狂瀾，是否真的能夠得到用戶的信任，是否真的能夠得到網(wǎng)頁

另一個“焦油坑”——“縱向撐開”
上面解決方法，只是“橫向”的、寬度的問題，其實“‘overflow:visible’IE6渲染bug”，同樣也會引起縱向的、高度方面的頁面布局混亂。解決“縱向撐開bug”和解決“橫向撐開bug”需要采用完全不同的解決方案。但是，相比“縱向撐開bug”解決方案，“橫向撐開bug”解決方案卻簡單很多——只要我們讓IE7和FireFox，也能像IE6中那樣根據(jù)內(nèi)容，自適應高度即可。如何才能讓容器在IE7和FireFox中能夠自適應高度呢？其實很簡單，也是IE7的重要改進之一，使用“min-height”樣式。雖然IE7中已經(jīng)支持“min-height/min-width”和"max-height/max-width"樣式。但是IE6卻不認識這些"min-"、"max-"開頭的樣式，所以，我們還需要使用一個css hack為IE6設置一個“height”，只讓IE6認識，IE7和FireFox都不認識。通過這篇文章 《實例講解符合中國特色的和網(wǎng)絡現(xiàn)狀的實用CSS Hack(附源碼)》 便可以找到應該使用的css hack。下面的示例可能會有助于你理解此解決方法：
<!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; 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>
* { margin: 0; padding: 0; }
#header {
width: 600px;
/*height:50px;注釋掉下面兩句，放出這一句，在FireFox和IE7中便能呈現(xiàn)bug*/
min-height:50px;/*只設置最小高度，讓IE7和FireFox自適應高度*/
_height: 50px;/*采用只有IE6才認識到css hack，讓不認識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理解的不夠透徹，我以后會特意出篇文章介紹這個樣式，有興趣的朋友可以關注我的博客http://justinyoung.cnblogs.com*/
}
</style>
</head>
<body>
<div id="header">
這里是頭部的內(nèi)容。<br/>
可能有網(wǎng)站標題，就像<a target="_blank" href="" title="">博客園</a>博客的標題、副標題。<br/>
也可能有導航欄在這里<br/>
<strong>注意這句話在IE7中的顯示1</strong><br/>
<strong>注意這句話在IE7中的顯示2</strong><br/>
</div>
<div id="body">
這里是主體的內(nèi)容，隨便你寫啦。我就寫上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標準之道">YES！B/S！</a>
<p> 專注于B/S模式的項目。姓名：楊正祎(Justin Young)，程序員，專注于B/S模式的項目開發(fā)，擅長于Web標準頁面設計。</p>
<p>歡迎你們來為我的博客做客哦，里面有很多關于web標準方面的文章哦。請你們多多指教。</p>
<p>最后還要非常華麗的署名——楊正祎</p>
<p>日期當然也不能少啦——2008-2-21</p>
</div><!--end: body -->
<div id="footer">
這里是footer，就放一些版權信息吧。&copy;<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標準之道">YES！B/S！</a>
</div><!--end: footer -->
</body>
</html>
下面是修正后頁面的效果截圖，在IE6、IE7和FireFox總都是令人滿意的顯示結(jié)果：

利用min-height和css hack讓容器在IE7和FireFox中自適應高度
后記
對于最容易引起網(wǎng)頁布局混亂的“‘overflow:visible’IE6渲染bug”，上面從多個方向和角度進行了講解。雖然有些方面還不能有完美的解決方案，但是在更理性的解決方案出現(xiàn)之前，暫時也是沒有辦法的事情，只能留個遺憾在那里，因為我們還要繼續(xù)前進……

相關文章

最新評論