亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

IE7與web標準設計（3）

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

如何解決“橫向撐開”問題
用“word-wrap: break-word”解決：
導致布局混亂的主要原因，是IE6對overflow的visible的錯誤解釋，才導致寬度被“撐開”才造成的。所以，我們必須采取措施，讓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標準,楊正祎,博客園,實例代碼" />
<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”又導致了IE（IE6和IE7）和FireFox的顯示結果新的不一致。那還有沒有其他的辦法呢？“擒賊先擒王”，既然是“overflow: visible”導致的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標準,楊正祎,博客園,實例代碼" />
<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中終于顯示一致了

相關文章

最新評論