欧美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ì)。看著FireFox的市場(chǎng)占有率不停的上升，微軟終于推出了IE7。但I(xiàn)E7是否真的能夠力挽狂瀾，是否真的能夠得到用戶(hù)的信任，是否真的能夠得到網(wǎng)頁(yè)

如何解決“橫向撐開(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中的“孩子”乖乖的待在“父親”的允許訪(fǎng)問(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中終于顯示一致了

相關(guān)文章

最新評(píng)論