IE中文字結(jié)尾出現(xiàn)重復跳字的解決辦法_瀏覽器兼容教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

設計網(wǎng)頁的時候,會經(jīng)常發(fā)現(xiàn)在IE里會有一段文字被重復顯示,看源代碼只有一遍,但是在IE里會出現(xiàn)兩邊,這是怎么回事呢?該怎么解決呢?

本問就針對這個問題進行了詳細的解析,希望能幫到大家.

調(diào)試代碼:

<!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=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>

1、在IE、FF中測試，只在IE出現(xiàn)文字溢出現(xiàn)象。

說明：注釋造成文字溢出是IE的BUG。

2、去除<div style=”float:left”></div> 中的“float:left;”，你會發(fā)現(xiàn)多出來的“豬”字不見了，頁面正常顯示。

同樣去除 <div style=”float:right;width:400px”>中的“float:right;”，多余的“豬”字也同樣消失，頁面正常顯示。

說明：注釋造成文字溢出與區(qū)塊的浮動有關(guān)。

3、將注釋轉(zhuǎn)移到<div style=”float:left”></div>前面，多余的“豬”字消失，頁面正常顯示。

將注釋轉(zhuǎn)移到<div style=”float:right;width:400px”>↓這就是多出來的那只豬</div>下面，多余的“豬”字也同樣消失，頁面正常顯示。

說明：注釋造成文字溢出與其位置有關(guān)。（可與第2點結(jié)合理解）

4、去除<div style=”float:right;width:400px”>中的“width:400px”，多余的“豬”字消失，頁面正常顯示。

說明：注釋造成文字溢出與文字區(qū)塊的固定寬度有關(guān)（無論是絕對值還是相對值）。

5、增加注釋的條數(shù)：當1條注釋時，則多出來1個字；2條注釋時，則多出來3個字；3條注釋時，則多出來5個字……

我們會從上面的規(guī)律中得到這樣一個公式：溢出文字的字數(shù)=注釋的條數(shù)*2-1，這里的字數(shù)在中文或英文數(shù)字時都成立。

當溢出的文字字數(shù)大于文本的字數(shù)時，文字區(qū)塊將會消失。

說明：溢出的字數(shù)與注釋的條數(shù)有關(guān)。

由1和2的測試得知：注釋不要放置于2個浮動的區(qū)塊之間。

解決方法：

1、不放置注釋。最簡單、最快捷的解決方法，嘿嘿……

2、注釋不要放置于2個浮動的區(qū)塊之間。

3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style=”float:right;width:400px”><div>↓這就是多出來的那只豬</div></div>。

4、去除文字區(qū)塊的固定寬度，與3有相似之處。

———————————————————————————————————————————

IE bug重復文字

<!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=gb2312" />
<title> new document </title>
<style type="text/css">
  *{margin:0;padding:0;}
  body {font:12px verdana,Geneva,sans-serif;padding:10px;}
  .box{width:300px;}
  .box div{float:left;width:150px;}
  </style>
 </head>
 <body>
  <div class="box">
  <div class="box1">重復文字:</div>
  <!--  -->
  <div class="box2">需要您我是一只魚</div>
  </div>
 </body>
</html>

這種bug他是在ie6下面是存在的

成立條件是
他的父元素跟子元素寬度和是相等的，
子元素中間沒有其他的展示內(nèi)容，只有注釋符合在里面就會產(chǎn)生重復最后一個子元素的最后一個字符。

———————————————————————————————————————————

css文字重復IE bug導致文字的奇怪復制

<!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=gb2312" />
<title>多了一只豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓這就是多出來的那只豬</div>
</div>
</body>
</html>

可以通過以下的辦法來解決：

1、不放置注釋。最簡單、最快捷的解決方法
2、注釋不要放置于2個浮動的區(qū)塊之間。
3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style=”float:right;width:400px”><div>↓這就是多出來的那只豬</div>& lt;/div>。
4、去除文字區(qū)塊的固定寬度，與3有相似之處。
5、有的人在豬后加一個<br />或者空格，但只是消除現(xiàn)象。
6、不要給浮動元素設置多寬度，使其不會到達包含元素的底部，或者對最后一個元素設置margin-right: -3px;或者更小。
7、注釋可以這樣寫：<!–[if !IE]>Put your commentary in here…<![endif]–>