9999热视频三级毛片AV区|日韩欧美精品狼友观看视频|av在线成人免费AA片|日韩三级AV电影|久久亚洲私人国产精品vA|亚洲无码卡一卡二卡三|手机在线免费看黄色片|婷婷尹人在线婷婷五月手机网|99爱在线播放|欧美成人色情视频品

網頁注釋在IE中產生文字溢出
來源：易賢網 閱讀：1743 次 日期：2016-07-04 13:35:01
溫馨提示：易賢網小編為您整理了“網頁注釋在IE中產生文字溢出”,方便廣大網友查閱！

實驗代碼如下:

<!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)多出來的“豬”字不見了，頁面正常顯示。

<!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></div>

<!-- -->

<div style="float:right;width:400px">↓這就是多出來的那只豬</div>

</div>

</body>

</html>

提示：您可以先修改部分代碼再運行 同樣去除 <div style="float:right;width:400px">中的“float:right;”，多余的“豬”字也同樣消失，頁面正常顯示。

<!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="width:400px">↓這就是多出來的那只豬</div>

</div>

</body>

</html>

提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與區(qū)塊的浮動有關。

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

<!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>

提示：您可以先修改部分代碼再運行 將注釋轉移到<div style="float:right;width:400px">↓這就是多出來的那只豬</div>下面，多余的“豬”字也同樣消失，頁面正常顯示。

<!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>

提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與其位置有關。（可與第2點結合理解）

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

<!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;">↓這就是多出來的那只豬</div>

</div>

</body>

</html>

提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與文字區(qū)塊的固定寬度有關（無論是絕對值還是相對值）。

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

<!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>

提示：您可以先修改部分代碼再運行 

<!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>

提示：您可以先修改部分代碼再運行 

<!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>

提示：您可以先修改部分代碼再運行 

<!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>

提示：您可以先修改部分代碼再運行 我們會從上面的規(guī)律中得到這樣一個公式：溢出文字的字數(shù)=注釋的條數(shù)*2-1，這里的字數(shù)在中文或英文數(shù)字時都成立。

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

<!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>

提示：您可以先修改部分代碼再運行 說明：溢出的字數(shù)與注釋的條數(shù)有關。

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

解決方法：

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

<!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>

提示：您可以先修改部分代碼再運行 2、注釋不要放置于2個浮動的區(qū)塊之間。

<!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>

提示：您可以先修改部分代碼再運行 3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style="float:right;width:400px"><div>↓這就是多出來的那只豬</div></div>。

<!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></div>

</div>

</body>

</html>

提示：您可以先修改部分代碼再運行 4、去除文字區(qū)塊的固定寬度，與3有相似之處。

<!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;">↓這就是多出來的那只豬</div>

</div>

</body>

</html>

提示：您可以先修改部分代碼再運行 可能以上的分析和解決方法有不到位或者不準確的地方，歡迎討論指正

更多信息請查看網頁制作
易賢網手機網站地址：網頁注釋在IE中產生文字溢出
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網