欧美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歷來(lái)被web標(biāo)準(zhǔn)的擁護(hù)者所詬病，而當(dāng)FireFox橫空出世以后，更多的網(wǎng)頁(yè)制作者開(kāi)始關(guān)注web標(biāo)準(zhǔn)設(shè)計(jì)?？粗鳩ireFox的市場(chǎng)占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶(hù)的信任，是否真的能夠得到網(wǎng)頁(yè)

上文：IE7與web標(biāo)準(zhǔn)設(shè)計(jì)（2）
IE歷來(lái)被web標(biāo)準(zhǔn)的擁護(hù)者所詬病，而當(dāng)FireFox橫空出世以后，更多的網(wǎng)頁(yè)制作者開(kāi)始關(guān)注web標(biāo)準(zhǔn)設(shè)計(jì)?？粗鳩ireFox的市場(chǎng)占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶(hù)的信任，是否真的能夠得到網(wǎng)頁(yè)設(shè)計(jì)者的認(rèn)可呢？
且看《IE7的web標(biāo)準(zhǔn)之道》系列文章，和你一起見(jiàn)證IE7的改變！
前言
現(xiàn)在，最令網(wǎng)頁(yè)設(shè)計(jì)者頭痛的問(wèn)題就是網(wǎng)頁(yè)在各個(gè)瀏覽器中的兼容性。而兼容性差最長(zhǎng)見(jiàn)的，也是最令人恐懼的便是“頁(yè)面布局混亂”。常常一個(gè)頁(yè)面在IE6下顯示的非常完美，而到了IE7（或者FireFox）中，則慘的“不堪入目”。到底是什么讓這些頁(yè)面那么的“水土不服”呢？
其實(shí)，這些都是IE6釀下的惡果，IE6對(duì)web標(biāo)準(zhǔn)的支持過(guò)于不足，甚至理解的有偏差，才導(dǎo)致了這些頁(yè)面的“脆弱”。而IE7則修正了很多的那種“IE6對(duì)css解釋和渲染”的bug。這種bug有很多。今天，這里只講其中一個(gè)，但是確是最重要的一個(gè)，很多的“十分”混亂的頁(yè)面都是它造成的?？梢圆豢蜌獾卣f(shuō)，它簡(jiǎn)直就像“頁(yè)面布局混亂黑幫”的幕后黑手，是引起頁(yè)面布局混亂的禍?zhǔn)字?，而且是最大的一個(gè)。 它就是潛伏在網(wǎng)頁(yè)背后的“‘overflow:visible’IE6渲染bug”。
“不堪入目”的網(wǎng)頁(yè)截圖
如果只是簡(jiǎn)單的說(shuō)“‘overflow:visible’IE6渲染bug”，你可能完全沒(méi)有印象。但是看看下面的這些“不堪入目”的網(wǎng)頁(yè)截圖，便能引起你心中那無(wú)限的傷感……

圖：這是在IE6中顯示的效果截圖，“十分完美”

這是在IE7中顯示的“不堪入目”的效果截圖
上面的兩張截圖，是我2007年在高達(dá)軟件公司的真實(shí)項(xiàng)目截圖?？梢钥闯觯贗E7下的顯示已經(jīng)嚴(yán)重變形，雖然不影響軟件的功能使用，但是已經(jīng)嚴(yán)重的影響了用戶(hù)的使用體驗(yàn)(沒(méi)有人喜歡拖動(dòng)橫向滾動(dòng)條)。
#p#
再看看下面的這個(gè)網(wǎng)頁(yè)截圖，它是我們今天將要使用的例子(源代碼在下方有提供)，是一個(gè)標(biāo)準(zhǔn)的“上左右下”帶側(cè)邊欄的虛擬網(wǎng)頁(yè)。
運(yùn)行代碼框

[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

圖：這是在IE6中顯示的效果截圖，還算“整齊”
而當(dāng)你展開(kāi)下面這個(gè)折疊區(qū)域，去看這個(gè)頁(yè)面在IE7下顯示的效果圖的時(shí)候，可能便會(huì)大吃一驚了。

圖：這是在IE7中顯示的效果截圖，已經(jīng)“不堪入目”了
我們驚訝的看到，網(wǎng)頁(yè)“頭部”變“矮”了，最后兩句重要的句子“消失”了；側(cè)邊欄變“窄”了，那個(gè)重要的網(wǎng)址的后半部消失了（其實(shí)是被右面綠色的區(qū)域遮蓋住了）；而最令人沮喪的是，右面“缺了個(gè)大口子”。原本整齊的布局，已經(jīng)完全消失，出現(xiàn)的是一個(gè)“一塌糊涂”的頁(yè)面。
#p#
到底是什么，將一個(gè)原本好好的頁(yè)面“糟蹋”成這樣？且看下面的詳細(xì)講解……


圖：這是在FireFox中顯示的效果截圖，已經(jīng)亂的“令人抓狂”了
為什么在FireFox又有這么令人抓狂的顯示呢？原來(lái)，這便是IE7的web標(biāo)準(zhǔn)之道的精髓了。隨著web標(biāo)準(zhǔn)的推廣和認(rèn)可度的提高，IE7必須向web標(biāo)準(zhǔn)靠攏，但是有必須兼顧到，那些現(xiàn)在在IE6中還顯示正常的億萬(wàn)個(gè)已經(jīng)存在的頁(yè)面。這樣矛盾就產(chǎn)生了——遵循標(biāo)準(zhǔn)就意味著頁(yè)面會(huì)顯示的亂七八糟，甚至無(wú)法瀏覽；但是如果太過(guò)于兼容IE6的那些爛攤子網(wǎng)頁(yè)，又必然會(huì)離web標(biāo)準(zhǔn)越來(lái)越遠(yuǎn)。于是IE7走出了自己的web標(biāo)準(zhǔn)之道——絕對(duì)重視web標(biāo)準(zhǔn)，又稍微兼顧IE6的爛攤子。于是，IE7顯示的那個(gè)頁(yè)面雖然已經(jīng)亂了，但是還不像在FireFox中顯示的那樣令人抓狂。
附：測(cè)試頁(yè)面在Opera（版本9.25）中的顯示效果截圖（寫(xiě)文章的時(shí)候Opera正好有了新的升級(jí)版本）

圖：這是在Opera中顯示的效果截圖，“亂的程度”和FireFox是一樣的
“非也，非也”
“千萬(wàn)別用IE7，IE7太垃圾了，瀏覽頁(yè)面會(huì)出現(xiàn)布局混亂，一些在IE6中顯示好好的頁(yè)面，用IE7瀏覽布局就會(huì)混亂。”這種言論在網(wǎng)上會(huì)經(jīng)常見(jiàn)到，好像是IE7才導(dǎo)致了那些頁(yè)面的混亂。其實(shí)，非也，非也。
悟空說(shuō)：“師父快快回避，且待我一棒打死這妖精！”
八戒說(shuō)：“師父，那個(gè)姑娘俊俏的很，怎么會(huì)是妖怪呢？大師兄他騙人的！”
唐僧說(shuō)：“那位施主，只是一平常人家的姑娘，定然不會(huì)是什么妖魔鬼怪。悟空你休得胡言論語(yǔ)。”
白骨精說(shuō)：“ohYeah！2比1，看來(lái)這下安全了！”
那些IE7瀏覽時(shí)會(huì)出現(xiàn)布局混亂的頁(yè)面，就如同利用妖術(shù)變了身的白骨精一樣，在八戒和唐僧的凡眼看來(lái)就是個(gè)俊俏的姑娘。但是，在猴哥的“火眼金睛”下便立刻現(xiàn)了形。而那些布局和樣式隱藏著bug的頁(yè)面，在IE6的袒護(hù)和包庇下，化身成“完美頁(yè)面”，招搖過(guò)市。但是在IE7的嚴(yán)厲的審核下，自然“原形畢露”、“bug層出”，從而導(dǎo)致布局混亂。但是，令人遺憾的卻是——IE7被那些不知情的“凡骨俗胎”的人們咒罵、貶低、踩在腳底……這是一出悲??！
#p#
表面原因——放縱的孩子和嚴(yán)厲的父親
在2007年5月份的時(shí)候，我曾經(jīng)寫(xiě)過(guò)一篇文章，叫做《IE6與IE7，放縱的孩子與嚴(yán)厲的父親》。當(dāng)時(shí)技術(shù)水平和對(duì)web標(biāo)準(zhǔn)的認(rèn)知有限，所以寫(xiě)出來(lái)的這篇文章，雖然從表面合理的解釋了造成布局混亂的原因，但是并沒(méi)有說(shuō)到根本上去。可謂“只知其一，不知其二”，但是這里依然推薦你閱讀一篇。因?yàn)?ldquo;先知其一，再知其二”將更有助于這“其二”的原因。
“其二”原因——IE6對(duì)“overflow:visible”的誤解
為了兼顧到對(duì)overflow可能還不是很了解到朋友，這里是關(guān)于overflow樣式的一些資料：W3C關(guān)于overflow的資料。請(qǐng)注意W3C對(duì)于visible參數(shù)的解釋?zhuān)?
Visible： "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box（注：后面這句可能是后續(xù)版本補(bǔ)充上來(lái)的）".
注意，w3c只是說(shuō)，超出容器的內(nèi)部不會(huì)被剪切。但是它并沒(méi)有說(shuō)，超出來(lái)的內(nèi)容可以“撐開(kāi)”容器。所以下面這個(gè)例子中IE7和FireFox的解釋和渲染是正確的，而IE6則是錯(cuò)誤的（因?yàn)樗e(cuò)誤的認(rèn)為，只有讓容器內(nèi)的內(nèi)容“撐開(kāi)”容器，才能讓容器內(nèi)的內(nèi)容在超出時(shí)不被剪切）。
<!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è)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</body>
</html>
下面是上面示例分別在IE6，IE7，F(xiàn)ireFox（版本2.0.0，12）和Oepra（版本9.25）中的顯示效果截圖（IE6和IE7共存的方法，可以參考文章《IE6和IE7共存方法（別人是別人的，我是我的）》）。

顯然只有IE6的渲染結(jié)果是“另類(lèi)”的
從圖片中我們可以看到IE7和FireFox的渲染結(jié)果是一樣，IE6是個(gè)“壞孩子”，就不多說(shuō)了，而Oepra的渲染結(jié)果和FireFox以及IE7也是有點(diǎn)差距的。但是這不是因?yàn)閷?duì)overflow樣式的理解有誤差造成的，所以這里也不再扯開(kāi)話題了。
#p#
何以稱(chēng)之為“禍?zhǔn)?rdquo;
這篇文章的題目中，將這個(gè)bug稱(chēng)之為“引起頁(yè)面布局混亂的禍?zhǔn)?rdquo;。能被稱(chēng)之為“禍?zhǔn)?rdquo;，自然有其“強(qiáng)悍”的地方。那它到底強(qiáng)悍在什么地方呢？其實(shí)，很簡(jiǎn)單，就3條：
    無(wú)論是“寬度”的內(nèi)容過(guò)長(zhǎng)，還是“高度”的內(nèi)容過(guò)長(zhǎng)，都會(huì)引發(fā)此bug。 無(wú)論是文字、圖片，還是任意有寬度和高度概念的“可見(jiàn)元素”，它們的“過(guò)寬”和“過(guò)高”都會(huì)引發(fā)此bug。 任意有寬度和高度概念的“可見(jiàn)元素”,它們?cè)谀J(rèn)狀態(tài)下的“overflow”樣式的值都是“Visible”（即使你沒(méi)有設(shè)置這個(gè)樣式）。

有些朋友可能會(huì)問(wèn)，你怎么知道任意有寬度和高度概念的“可見(jiàn)元素”,它們?cè)谀J(rèn)狀態(tài)下的“overflow”樣式的值都是“Visible”的呢？
其實(shí)方法很簡(jiǎn)單，利用IE Developer Toolbar這個(gè)工具就可以知道了。下面的文章和截圖，可能會(huì)對(duì)你有幫助：
文章： 《介紹兩個(gè),b/s開(kāi)發(fā)中我常用到的小工具》
截圖：

圖：利用“IE Developer Toolbar”得到元素樣式的默認(rèn)值
如何修復(fù)bug
其實(shí)這個(gè)bug，我們還是有辦法修復(fù)的，但都不是很完美的解決方案，想要取得較好的效果，還需要一些技巧。下面便是我工作中總結(jié)的一套解決方案。小弟才疏，眾多不對(duì)之處，還請(qǐng)各位高手指教。
修正這個(gè)bug首先要洗腦一下，因?yàn)殄e(cuò)誤的認(rèn)識(shí)將不利于你對(duì)解決方法的理解。
    雖然，那個(gè)虛擬的示例網(wǎng)頁(yè)在IE6中能夠“完美的”顯示，但是它并不是正確的。我們不能通過(guò)css hack的方法讓它在FireFox和IE7中顯示“靠近”IE6，而是應(yīng)該“拔下”IE6的那層虛假的“皮”，重新塑造網(wǎng)頁(yè)，從而讓它在IE6、IE7和FireFox中都能正常顯示。 就算讓網(wǎng)頁(yè)在IE6、IE7和FireFox中，都可以正常顯示了，但卻未必就是最終想要的效果。 為了達(dá)到最終想要的結(jié)果，可能需要使用不推薦使用的措施——css hack。

#p#
如何解決“橫向撐開(kāi)”問(wèn)題
用“word-wrap: break-word”解決：
導(dǎo)致布局混亂的主要原因，是IE6對(duì)overflow的visible的錯(cuò)誤解釋?zhuān)艑?dǎo)致寬度被“撐開(kāi)”才造成的。所以，我們必須采取措施，讓IE6中容器不能那么“放縱孩子”才可以。方法就是使用“word-wrap: break-word”樣式（IE特有，F(xiàn)ireFox不起任何作用），強(qiáng)制要求容器內(nèi)的內(nèi)容不允許“撐開(kāi)”父容器。下面的示例可能有助于理解。
利用“word-wrap: break-word”可以讓IE6中的“孩子”乖乖的待在“父親”的允許訪問(wèn)內(nèi)。如下圖所示：
<!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è)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</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="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</body>
</html>

利用“word-wrap: break-word”后，即使在IE6中，容器也不再被“撐開(kāi)”
用“overflow: hidden”解決：
顯然，用“word-wrap: break-word”又導(dǎo)致了IE（IE6和IE7）和FireFox的顯示結(jié)果新的不一致。那還有沒(méi)有其他的辦法呢？“擒賊先擒王”，既然是“overflow: visible”導(dǎo)致的bug，那直接改變“overflow”的值不就可以了嗎？所以，使用“overflow: hidden”便能讓IE6、IE7和FireFox顯示一直。下面的這個(gè)示例，可能會(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è)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</body>
</html>
下面是在IE6、IE7和FireFox中的現(xiàn)實(shí)效果截圖：


IE6、IE7和FireFox中終于顯示一致了
#p#
一個(gè)大問(wèn)題與殘缺的美麗
從截圖看，網(wǎng)頁(yè)在IE6、IE7和FireFox中的確顯示一致了（就布局顯示而言）。但是，卻發(fā)現(xiàn)了一個(gè)大問(wèn)題！那就是——這并不是我想要的結(jié)果呀。假使這里的div是一個(gè)側(cè)邊欄，我們只是要求，它老老實(shí)實(shí)的那么“寬”，不要亂“撐”寬度就可以了，內(nèi)容我們還是要看的呀，你不能把內(nèi)容都剪切了不讓我看呀。
如何讓“很長(zhǎng)度文字”換行顯示呢？其實(shí)在前面我們已經(jīng)使用到了，那就是“word-wrap: break-word”。雖然它是IE的特有樣式，但是足以先解決IE6和IE7中的問(wèn)題。但是FireFox中沒(méi)有這個(gè)樣式，那FireFox下如何使“很長(zhǎng)文字”自動(dòng)換行顯示呢？我們遺憾的發(fā)現(xiàn)FireFox并沒(méi)有提供類(lèi)似的樣式供我們使用，目前唯一的解決方案是利用JavaScript實(shí)現(xiàn)。原理很簡(jiǎn)單，就是根據(jù)寬度，將文本截取成多段，在每段后面強(qiáng)制加上換行符。下面的實(shí)現(xiàn)示例可能會(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è)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from http://justinyoung.cnblogs.com/
</div>
<script type="text/javascript">
// <![CDATA[
if(document.getElementById && !document.all) wordWarp4ff(6)/*數(shù)值6根據(jù)寬度需要發(fā)生變化*/
function wordWarp4ff(intLen){
var obj=document.getElementById("div1");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp =strContent.substr(0,intLen) " ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp =" " strContent;
obj.innerHTML=strTemp;
}
// ]]>
</script>
</body>
</html>
看著下面的截圖，終于能即滿足要求，又在IE6、IE7和FireFox中顯示一致了！

終于能即滿足要求，又在IE6、IE7和FireFox中顯示一致了
但是，如同殘缺的美麗，驚艷的美隱藏著巨大的缺憾。令人遺憾是——如果容器中的內(nèi)容，不是文字，而是圖片時(shí)，這種方法將無(wú)能為力。只能將容器放寬，或者縮小圖片，當(dāng)然，你也可以使用“overflow: hidden”將超出的內(nèi)容剪切掉。另一個(gè)遺憾是——在FireFox中，div1容器里面的標(biāo)簽和樣式也將失去，只留下文本……
#p#
另一個(gè)“焦油坑”——“縱向撐開(kāi)”
上面解決方法，只是“橫向”的、寬度的問(wèn)題，其實(shí)“‘overflow:visible’IE6渲染bug”，同樣也會(huì)引起縱向的、高度方面的頁(yè)面布局混亂。解決“縱向撐開(kāi)bug”和解決“橫向撐開(kāi)bug”需要采用完全不同的解決方案。但是，相比“縱向撐開(kāi)bug”解決方案，“橫向撐開(kāi)bug”解決方案卻簡(jiǎn)單很多——只要我們讓IE7和FireFox，也能像IE6中那樣根據(jù)內(nèi)容，自適應(yīng)高度即可。如何才能讓容器在IE7和FireFox中能夠自適應(yīng)高度呢？其實(shí)很簡(jiǎn)單，也是IE7的重要改進(jìn)之一，使用“min-height”樣式。雖然IE7中已經(jīng)支持“min-height/min-width”和"max-height/max-width"樣式。但是IE6卻不認(rèn)識(shí)這些"min-"、"max-"開(kāi)頭的樣式，所以，我們還需要使用一個(gè)css hack為IE6設(shè)置一個(gè)“height”，只讓IE6認(rèn)識(shí)，IE7和FireFox都不認(rèn)識(shí)。通過(guò)這篇文章 《實(shí)例講解符合中國(guó)特色的和網(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è)簡(jiǎn)單YES!B/S!文章示例頁(yè)面,來(lái)自楊正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例頁(yè)面</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)容，隨便你寫(xiě)啦。我就寫(xiě)上我的博客地址吧——<a target="_blank" href="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES！B/S！</a>
<p> 專(zhuān)注于B/S模式的項(xiàng)目。姓名：楊正祎(Justin Young)，程序員，專(zhuān)注于B/S模式的項(xiàng)目開(kāi)發(fā)，擅長(zhǎng)于Web標(biāo)準(zhǔn)頁(yè)面設(shè)計(jì)。</p>
<p>歡迎你們來(lái)為我的博客做客哦，里面有很多關(guān)于web標(biāo)準(zhǔn)方面的文章哦。請(qǐng)你們多多指教。</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>
下面是修正后頁(yè)面的效果截圖，在IE6、IE7和FireFox總都是令人滿意的顯示結(jié)果：

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

相關(guān)文章

最新評(píng)論