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

IE7與web標準設(shè)計（3）

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

一個大問題與殘缺的美麗
從截圖看，網(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標準,楊正祎,博客園,實例代碼" />
<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)容，不是文字，而是圖片時，這種方法將無能為力。只能將容器放寬，或者縮小圖片，當然，你也可以使用“overflow: hidden”將超出的內(nèi)容剪切掉。另一個遺憾是——在FireFox中，div1容器里面的標簽和樣式也將失去，只留下文本……

相關(guān)文章

最新評論