當多個浮動的元素彼此跟隨，中間加註釋的時候，最後一個浮動元素內的文本偶爾會複製到最下面去。學名Duplicate Characters Bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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個浮動的區塊之間。
3、將文字區塊包含在新的<div></div>之間，如：<div style="float:right;width:400px"><div>↓這就是多出來的那隻豬</div></div>。
4、去除文字區塊的固定寬度，與3有相似之處。
5、有的人在豬後加一個<br />或者空格，但只是消除現象。
6、不要給浮動元素設置多寬度，使其不會到達包含元素的底部，或者對最後一個元素設置margin-right: -3px;或者更小。
7、註釋可以這樣寫：<!--[if !IE]>Put your commentary in here...<![endif]-->
解決文本複製到最下面
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章