欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

IE7與web標(biāo)準(zhǔn)設(shè)計(jì)(3)

互聯(lián)網(wǎng)   發(fā)布時(shí)間:2008-10-17 19:26:13   作者:佚名   我要評(píng)論
上文:IE7與web標(biāo)準(zhǔn)設(shè)計(jì)(2) IE歷來被web標(biāo)準(zhǔn)的擁護(hù)者所詬病,而當(dāng)FireFox橫空出世以后,更多的網(wǎng)頁制作者開始關(guān)注web標(biāo)準(zhǔn)設(shè)計(jì)??粗鳩ireFox的市場占有率不停的上升,微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾,是否真的能夠得到用戶的信任,是否真的能夠得到網(wǎng)頁

另一個(gè)“焦油坑”——“縱向撐開”
上面解決方法,只是“橫向”的、寬度的問題,其實(shí)“‘overflow:visible’IE6渲染bug”,同樣也會(huì)引起縱向的、高度方面的頁面布局混亂。解決“縱向撐開bug”和解決“橫向撐開bug”需要采用完全不同的解決方案。但是,相比“縱向撐開bug”解決方案,“橫向撐開bug”解決方案卻簡單很多——只要我們讓IE7和FireFox,也能像IE6中那樣根據(jù)內(nèi)容,自適應(yīng)高度即可。如何才能讓容器在IE7和FireFox中能夠自適應(yīng)高度呢?其實(shí)很簡單,也是IE7的重要改進(jìn)之一,使用“min-height”樣式。雖然IE7中已經(jīng)支持“min-height/min-width”和"max-height/max-width"樣式。但是IE6卻不認(rèn)識(shí)這些"min-"、"max-"開頭的樣式,所以,我們還需要使用一個(gè)css hack為IE6設(shè)置一個(gè)“height”,只讓IE6認(rèn)識(shí),IE7和FireFox都不認(rèn)識(shí)。通過這篇文章 《實(shí)例講解符合中國特色的和網(wǎng)絡(luò)現(xiàn)狀的實(shí)用CSS Hack(附源碼)》 便可以找到應(yīng)該使用的css hack。下面的示例可能會(huì)有助于你理解此解決方法:
<!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標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡單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)識(shí)到css hack,讓不認(rèn)識(shí)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在新的一行顯示,很多朋友對(duì)clear理解的不夠透徹,我以后會(huì)特意出篇文章介紹這個(gè)樣式,有興趣的朋友可以關(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="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES!B/S!</a>
<p> 專注于B/S模式的項(xiàng)目。姓名:楊正祎(Justin Young),程序員,專注于B/S模式的項(xiàng)目開發(fā),擅長于Web標(biāo)準(zhǔn)頁面設(shè)計(jì)。</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)信息吧。&copy;<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES!B/S!</a>
</div><!--end: footer -->
</body>
</html>
下面是修正后頁面的效果截圖,在IE6、IE7和FireFox總都是令人滿意的顯示結(jié)果:

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

相關(guān)文章

最新評(píng)論