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

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

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

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

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

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

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

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

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


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

圖：這是在Opera中顯示的效果截圖，“亂的程度”和FireFox是一樣的
“非也，非也”
“千萬別用IE7，IE7太垃圾了，瀏覽頁面會出現(xiàn)布局混亂，一些在IE6中顯示好好的頁面，用IE7瀏覽布局就會混亂。”這種言論在網(wǎng)上會經(jīng)常見到，好像是IE7才導(dǎo)致了那些頁面的混亂。其實，非也，非也。
悟空說：“師父快快回避，且待我一棒打死這妖精！”
八戒說：“師父，那個姑娘俊俏的很，怎么會是妖怪呢？大師兄他騙人的！”
唐僧說：“那位施主，只是一平常人家的姑娘，定然不會是什么妖魔鬼怪。悟空你休得胡言論語。”
白骨精說：“ohYeah！2比1，看來這下安全了！”
那些IE7瀏覽時會出現(xiàn)布局混亂的頁面，就如同利用妖術(shù)變了身的白骨精一樣，在八戒和唐僧的凡眼看來就是個俊俏的姑娘。但是，在猴哥的“火眼金睛”下便立刻現(xiàn)了形。而那些布局和樣式隱藏著bug的頁面，在IE6的袒護和包庇下，化身成“完美頁面”，招搖過市。但是在IE7的嚴(yán)厲的審核下，自然“原形畢露”、“bug層出”，從而導(dǎo)致布局混亂。但是，令人遺憾的卻是——IE7被那些不知情的“凡骨俗胎”的人們咒罵、貶低、踩在腳底……這是一出悲劇！
#p#
表面原因——放縱的孩子和嚴(yán)厲的父親
在2007年5月份的時候，我曾經(jīng)寫過一篇文章，叫做《IE6與IE7，放縱的孩子與嚴(yán)厲的父親》。當(dāng)時技術(shù)水平和對web標(biāo)準(zhǔn)的認(rèn)知有限，所以寫出來的這篇文章，雖然從表面合理的解釋了造成布局混亂的原因，但是并沒有說到根本上去?？芍^“只知其一，不知其二”，但是這里依然推薦你閱讀一篇。因為“先知其一，再知其二”將更有助于這“其二”的原因。
“其二”原因——IE6對“overflow:visible”的誤解
為了兼顧到對overflow可能還不是很了解到朋友，這里是關(guān)于overflow樣式的一些資料：W3C關(guān)于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則是錯誤的（因為它錯誤的認(rèn)為，只有讓容器內(nèi)的內(nèi)容“撐開”容器，才能讓容器內(nèi)的內(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),楊正祎,博客園,實例代碼" />
<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="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é)果是“另類”的
從圖片中我們可以看到IE7和FireFox的渲染結(jié)果是一樣，IE6是個“壞孩子”，就不多說了，而Oepra的渲染結(jié)果和FireFox以及IE7也是有點差距的。但是這不是因為對overflow樣式的理解有誤差造成的，所以這里也不再扯開話題了。
#p#
何以稱之為“禍?zhǔn)?rdquo;
這篇文章的題目中，將這個bug稱之為“引起頁面布局混亂的禍?zhǔn)?rdquo;。能被稱之為“禍?zhǔn)?rdquo;，自然有其“強悍”的地方。那它到底強悍在什么地方呢？其實，很簡單，就3條：
    無論是“寬度”的內(nèi)容過長，還是“高度”的內(nèi)容過長，都會引發(fā)此bug。 無論是文字、圖片，還是任意有寬度和高度概念的“可見元素”，它們的“過寬”和“過高”都會引發(fā)此bug。 任意有寬度和高度概念的“可見元素”,它們在默認(rèn)狀態(tài)下的“overflow”樣式的值都是“Visible”（即使你沒有設(shè)置這個樣式）。

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

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

#p#
如何解決“橫向撐開”問題
用“word-wrap: break-word”解決：
導(dǎo)致布局混亂的主要原因，是IE6對overflow的visible的錯誤解釋，才導(dǎo)致寬度被“撐開”才造成的。所以，我們必須采取措施，讓IE6中容器不能那么“放縱孩子”才可以。方法就是使用“word-wrap: break-word”樣式（IE特有，F(xiàn)ireFox不起任何作用），強制要求容器內(nèi)的內(nèi)容不允許“撐開”父容器。下面的示例可能有助于理解。
利用“word-wrap: break-word”可以讓IE6中的“孩子”乖乖的待在“父親”的允許訪問內(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),楊正祎,博客園,實例代碼" />
<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;
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中，容器也不再被“撐開”
用“overflow: hidden”解決：
顯然，用“word-wrap: break-word”又導(dǎo)致了IE（IE6和IE7）和FireFox的顯示結(jié)果新的不一致。那還有沒有其他的辦法呢？“擒賊先擒王”，既然是“overflow: visible”導(dǎo)致的bug，那直接改變“overflow”的值不就可以了嗎？所以，使用“overflow: hidden”便能讓IE6、IE7和FireFox顯示一直。下面的這個示例，可能會有助于你的理解：
<!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),楊正祎,博客園,實例代碼" />
<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;
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)實效果截圖：


IE6、IE7和FireFox中終于顯示一致了
#p#
一個大問題與殘缺的美麗
從截圖看，網(wǎng)頁在IE6、IE7和FireFox中的確顯示一致了（就布局顯示而言）。但是，卻發(fā)現(xiàn)了一個大問題！那就是——這并不是我想要的結(jié)果呀。假使這里的div是一個側(cè)邊欄，我們只是要求，它老老實實的那么“寬”，不要亂“撐”寬度就可以了，內(nèi)容我們還是要看的呀，你不能把內(nèi)容都剪切了不讓我看呀。
如何讓“很長度文字”換行顯示呢？其實在前面我們已經(jīng)使用到了，那就是“word-wrap: break-word”。雖然它是IE的特有樣式，但是足以先解決IE6和IE7中的問題。但是FireFox中沒有這個樣式，那FireFox下如何使“很長文字”自動換行顯示呢？我們遺憾的發(fā)現(xiàn)FireFox并沒有提供類似的樣式供我們使用，目前唯一的解決方案是利用JavaScript實現(xiàn)。原理很簡單，就是根據(jù)寬度，將文本截取成多段，在每段后面強制加上換行符。下面的實現(xiàn)示例可能會有助于你的理解：
<!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),楊正祎,博客園,實例代碼" />
<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;
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)容，不是文字，而是圖片時，這種方法將無能為力。只能將容器放寬，或者縮小圖片，當(dāng)然，你也可以使用“overflow: hidden”將超出的內(nèi)容剪切掉。另一個遺憾是——在FireFox中，div1容器里面的標(biāo)簽和樣式也將失去，只留下文本……
#p#
另一個“焦油坑”——“縱向撐開”
上面解決方法，只是“橫向”的、寬度的問題，其實“‘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" "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),楊正祎,博客園,實例代碼" />
<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="http://justinyoung.cnblogs.com/" title="IE7的web標(biāo)準(zhǔn)之道">YES！B/S！</a>
<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)信息吧。&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)高度
后記
對于最容易引起網(wǎng)頁布局混亂的“‘overflow:visible’IE6渲染bug”，上面從多個方向和角度進行了講解。雖然有些方面還不能有完美的解決方案，但是在更理性的解決方案出現(xiàn)之前，暫時也是沒有辦法的事情，只能留個遺憾在那里，因為我們還要繼續(xù)前進……

相關(guān)文章

最新評論