欧美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的市場(chǎng)占有率不停的上升,微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾,是否真的能夠得到用戶的信任,是否真的能夠得到網(wǎ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的市場(chǎng)占有率不停的上升,微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾,是否真的能夠得到用戶的信任,是否真的能夠得到網(wǎng)頁設(shè)計(jì)者的認(rèn)可呢?
且看《IE7的web標(biāo)準(zhǔn)之道》系列文章,和你一起見證IE7的改變!
前言
現(xiàn)在,最令網(wǎng)頁設(shè)計(jì)者頭痛的問題就是網(wǎng)頁在各個(gè)瀏覽器中的兼容性。而兼容性差最長(zhǎng)見的,也是最令人恐懼的便是“頁面布局混亂”。常常一個(gè)頁面在IE6下顯示的非常完美,而到了IE7(或者FireFox)中,則慘的“不堪入目”。到底是什么讓這些頁面那么的“水土不服”呢?
其實(shí),這些都是IE6釀下的惡果,IE6對(duì)web標(biāo)準(zhǔn)的支持過于不足,甚至理解的有偏差,才導(dǎo)致了這些頁面的“脆弱”。而IE7則修正了很多的那種“IE6對(duì)css解釋和渲染”的bug。這種bug有很多。今天,這里只講其中一個(gè),但是確是最重要的一個(gè),很多的“十分”混亂的頁面都是它造成的??梢圆豢蜌獾卣f,它簡(jiǎn)直就像“頁面布局混亂黑幫”的幕后黑手,是引起頁面布局混亂的禍?zhǔn)字唬沂亲畲蟮囊粋€(gè)。 它就是潛伏在網(wǎng)頁背后的“‘overflow:visible’IE6渲染bug”。
“不堪入目”的網(wǎng)頁截圖
如果只是簡(jiǎn)單的說“‘overflow:visible’IE6渲染bug”,你可能完全沒有印象。但是看看下面的這些“不堪入目”的網(wǎng)頁截圖,便能引起你心中那無限的傷感……

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

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

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


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

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


圖:這是在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中還顯示正常的億萬個(gè)已經(jīng)存在的頁面。這樣矛盾就產(chǎn)生了——遵循標(biāo)準(zhǔn)就意味著頁面會(huì)顯示的亂七八糟,甚至無法瀏覽;但是如果太過于兼容IE6的那些爛攤子網(wǎng)頁,又必然會(huì)離web標(biāo)準(zhǔn)越來越遠(yuǎn)。于是IE7走出了自己的web標(biāo)準(zhǔn)之道——絕對(duì)重視web標(biāo)準(zhǔn),又稍微兼顧IE6的爛攤子。于是,IE7顯示的那個(gè)頁面雖然已經(jīng)亂了,但是還不像在FireFox中顯示的那樣令人抓狂。
附:測(cè)試頁面在Opera(版本9.25)中的顯示效果截圖(寫文章的時(shí)候Opera正好有了新的升級(jí)版本)

圖:這是在Opera中顯示的效果截圖,“亂的程度”和FireFox是一樣的
“非也,非也”
“千萬別用IE7,IE7太垃圾了,瀏覽頁面會(huì)出現(xiàn)布局混亂,一些在IE6中顯示好好的頁面,用IE7瀏覽布局就會(huì)混亂。”這種言論在網(wǎng)上會(huì)經(jīng)常見到,好像是IE7才導(dǎo)致了那些頁面的混亂。其實(shí),非也,非也。
悟空說:“師父快快回避,且待我一棒打死這妖精!”
八戒說:“師父,那個(gè)姑娘俊俏的很,怎么會(huì)是妖怪呢?大師兄他騙人的!”
唐僧說:“那位施主,只是一平常人家的姑娘,定然不會(huì)是什么妖魔鬼怪。悟空你休得胡言論語。”
白骨精說:“ohYeah!2比1,看來這下安全了!”

那些IE7瀏覽時(shí)會(huì)出現(xiàn)布局混亂的頁面,就如同利用妖術(shù)變了身的白骨精一樣,在八戒和唐僧的凡眼看來就是個(gè)俊俏的姑娘。但是,在猴哥的“火眼金睛”下便立刻現(xiàn)了形。而那些布局和樣式隱藏著bug的頁面,在IE6的袒護(hù)和包庇下,化身成“完美頁面”,招搖過市。但是在IE7的嚴(yán)厲的審核下,自然“原形畢露”、“bug層出”,從而導(dǎo)致布局混亂。但是,令人遺憾的卻是——IE7被那些不知情的“凡骨俗胎”的人們咒罵、貶低、踩在腳底……這是一出悲?。?
#p#
表面原因——放縱的孩子和嚴(yán)厲的父親
在2007年5月份的時(shí)候,我曾經(jīng)寫過一篇文章,叫做《IE6與IE7,放縱的孩子與嚴(yán)厲的父親》。當(dāng)時(shí)技術(shù)水平和對(duì)web標(biāo)準(zhǔn)的認(rèn)知有限,所以寫出來的這篇文章,雖然從表面合理的解釋了造成布局混亂的原因,但是并沒有說到根本上去??芍^“只知其一,不知其二”,但是這里依然推薦你閱讀一篇。因?yàn)?ldquo;先知其一,再知其二”將更有助于這“其二”的原因。
“其二”原因——IE6對(duì)“overflow:visible”的誤解
為了兼顧到對(duì)overflow可能還不是很了解到朋友,這里是關(guān)于overflow樣式的一些資料:W3C關(guān)于overflow的資料。請(qǐng)注意W3C對(duì)于visible參數(shù)的解釋:
Visible: "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box(注:后面這句可能是后續(xù)版本補(bǔ)充上來的)".
注意,w3c只是說,超出容器的內(nèi)部不會(huì)被剪切。但是它并沒有說,超出來的內(nèi)容可以“撐開”容器。所以下面這個(gè)例子中IE7和FireFox的解釋和渲染是正確的,而IE6則是錯(cuò)誤的(因?yàn)樗e(cuò)誤的認(rèn)為,只有讓容器內(nèi)的內(nè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!文章示例頁面,來自楊正祎的博客,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是個(gè)“壞孩子”,就不多說了,而Oepra的渲染結(jié)果和FireFox以及IE7也是有點(diǎn)差距的。但是這不是因?yàn)閷?duì)overflow樣式的理解有誤差造成的,所以這里也不再扯開話題了。
#p#
何以稱之為“禍?zhǔn)?rdquo;
這篇文章的題目中,將這個(gè)bug稱之為“引起頁面布局混亂的禍?zhǔn)?rdquo;。能被稱之為“禍?zhǔn)?rdquo;,自然有其“強(qiáng)悍”的地方。那它到底強(qiáng)悍在什么地方呢?其實(shí),很簡(jiǎn)單,就3條:
    無論是“寬度”的內(nèi)容過長(zhǎng),還是“高度”的內(nèi)容過長(zhǎng),都會(huì)引發(fā)此bug。 無論是文字、圖片,還是任意有寬度和高度概念的“可見元素”,它們的“過寬”和“過高”都會(huì)引發(fā)此bug。 任意有寬度和高度概念的“可見元素”,它們?cè)谀J(rèn)狀態(tài)下的“overflow”樣式的值都是“Visible”(即使你沒有設(shè)置這個(gè)樣式)。

有些朋友可能會(huì)問,你怎么知道任意有寬度和高度概念的“可見元素”,它們?cè)谀J(rèn)狀態(tài)下的“overflow”樣式的值都是“Visible”的呢?
其實(shí)方法很簡(jiǎn)單,利用IE Developer Toolbar這個(gè)工具就可以知道了。下面的文章和截圖,可能會(huì)對(duì)你有幫助:
文章: 《介紹兩個(gè),b/s開發(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)頁在IE6中能夠“完美的”顯示,但是它并不是正確的。我們不能通過css hack的方法讓它在FireFox和IE7中顯示“靠近”IE6,而是應(yīng)該“拔下”IE6的那層虛假的“皮”,重新塑造網(wǎng)頁,從而讓它在IE6、IE7和FireFox中都能正常顯示。 就算讓網(wǎng)頁在IE6、IE7和FireFox中,都可以正常顯示了,但卻未必就是最終想要的效果。 為了達(dá)到最終想要的結(jié)果,可能需要使用不推薦使用的措施——css hack。

#p#
如何解決“橫向撐開”問題
用“word-wrap: break-word”解決:
導(dǎo)致布局混亂的主要原因,是IE6對(duì)overflow的visible的錯(cuò)誤解釋,才導(dǎo)致寬度被“撐開”才造成的。所以,我們必須采取措施,讓IE6中容器不能那么“放縱孩子”才可以。方法就是使用“word-wrap: break-word”樣式(IE特有,F(xiàn)ireFox不起任何作用),強(qiáng)制要求容器內(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),楊正祎,博客園,實(shí)例代碼" />
<meta name="Description" content="這是一個(gè)簡(jiǎn)單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顯示一直。下面的這個(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!文章示例頁面,來自楊正祎的博客,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)實(shí)效果截圖:


IE6、IE7和FireFox中終于顯示一致了
#p#
一個(gè)大問題與殘缺的美麗
從截圖看,網(wǎng)頁在IE6、IE7和FireFox中的確顯示一致了(就布局顯示而言)。但是,卻發(fā)現(xiàn)了一個(gè)大問題!那就是——這并不是我想要的結(jié)果呀。假使這里的div是一個(gè)側(cè)邊欄,我們只是要求,它老老實(shí)實(shí)的那么“寬”,不要亂“撐”寬度就可以了,內(nèi)容我們還是要看的呀,你不能把內(nèi)容都剪切了不讓我看呀。
如何讓“很長(zhǎng)度文字”換行顯示呢?其實(shí)在前面我們已經(jīng)使用到了,那就是“word-wrap: break-word”。雖然它是IE的特有樣式,但是足以先解決IE6和IE7中的問題。但是FireFox中沒有這個(gè)樣式,那FireFox下如何使“很長(zhǎng)文字”自動(dòng)換行顯示呢?我們遺憾的發(fā)現(xiàn)FireFox并沒有提供類似的樣式供我們使用,目前唯一的解決方案是利用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!文章示例頁面,來自楊正祎的博客,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)容,不是文字,而是圖片時(shí),這種方法將無能為力。只能將容器放寬,或者縮小圖片,當(dāng)然,你也可以使用“overflow: hidden”將超出的內(nèi)容剪切掉。另一個(gè)遺憾是——在FireFox中,div1容器里面的標(biāo)簽和樣式也將失去,只留下文本……
#p#
另一個(gè)“焦油坑”——“縱向撐開”
上面解決方法,只是“橫向”的、寬度的問題,其實(shí)“‘overflow:visible’IE6渲染bug”,同樣也會(huì)引起縱向的、高度方面的頁面布局混亂。解決“縱向撐開bug”和解決“橫向撐開bug”需要采用完全不同的解決方案。但是,相比“縱向撐開bug”解決方案,“橫向撐開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-"開頭的樣式,所以,我們還需要使用一個(gè)css hack為IE6設(shè)置一個(gè)“height”,只讓IE6認(rèn)識(shí),IE7和FireFox都不認(rèn)識(shí)。通過這篇文章 《實(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!文章示例頁面,來自楊正祎的博客,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ā),擅長(zhǎng)于Web標(biāo)準(zhǔn)頁面設(shè)計(jì)。</p>
<p>歡迎你們來為我的博客做客哦,里面有很多關(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>
下面是修正后頁面的效果截圖,在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)論