DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
HTML基礎知識
>>
HTML和Xhtml
>> 網頁注釋在IE中產生文字溢出
網頁注釋在IE中產生文字溢出
編輯：HTML和Xhtml
實驗代碼如下:
<!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出現文字溢出現象。
說明：注釋造成文字溢出是IE的BUG。
2、去除<div style="float:left"></div> 中的“float:left;”，你會發現多出來的“豬”字不見了，頁面正常顯示。
<!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>
提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與區塊的浮動有關。
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>
提示：您可以先修改部分代碼再運行 說明：注釋造成文字溢出與文字區塊的固定寬度有關（無論是絕對值還是相對值）。
5、增加注釋的條數：當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>
提示：您可以先修改部分代碼再運行 我們會從上面的規律中得到這樣一個公式：溢出文字的字數=注釋的條數*2-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>
提示：您可以先修改部分代碼再運行 說明：溢出的字數與注釋的條數有關。
由1和2的測試得知：注釋不要放置於2個浮動的區塊之間。
解決方法：
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個浮動的區塊之間。
<!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、將文字區塊包含在新的<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、去除文字區塊的固定寬度，與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>
提示：您可以先修改部分代碼再運行 可能以上的分析和解決方法有不到位或者不准確的地方，歡迎討論指正
上一頁:
HTML教程:定義列表
下一頁:
xhtml css網頁制作問題的解決方法
HTML和Xhtml
html的table用法(讓網頁的視覺效果顯示出來)
我們知道在網易博客可以用html時，是否把代碼直接加入到摸板中，但是效果卻不是很好。那是因為沒有對代
HTML標簽marquee實現滾動效果的簡單方法(必看)
頁面的自動滾動效果，可由javascript來實現，但是今天無意中發現了一個html標簽 - <
網頁制作教程:input輸入框技巧匯總
輸入框景背景透明：<input style="background:transpar
相關文章
HTML做的網頁 如何使當前頁面跳轉到另一頁面錨點處
Ajax bootstrap美化網頁並實現頁面的加載刪除與查看詳情
js實現不提示直接關閉網頁窗口
JavaScript+Html5實現按鈕復制文字到剪切板功能(手機網頁兼容)
javascript 注釋代碼的幾種方法總結
javascript計算用戶打開網頁的停留時間
Javascript實現帶關閉按鈕的網頁漂浮廣告代碼
JavaScript網頁定位詳解
解析谷歌將網頁加載速度快慢作為影響排名重要因素
可視的Xhtml網頁(CSS)的二維CSS元素圖解
HTML入門知識
HTML5教程
關於HTML
HTML和Xhtml
HTML5特效代碼
HTML5詳解
小編推薦
HTML教程：DOCTYPE 的縮寫
HTML表格標記教程(8):背景圖像屬性BACKGROUND
html頁面中常用的一些小方法整理
table合並單元格與img圖片鋪滿整個td的html
HTML標簽上標sup、下標sub應用介紹
HTML標簽語義化的介紹
保證網站整體的簡潔感網頁設計師的細節設計
HTML5網頁資源:HTML5 Canvas動畫的圖像效果實例
通過實例掌握BR和P標簽的區別
HTML+css制作簡易進度條
熱門推薦
用image來提交form不想使用button提交form
13個應用HTML5 和 CSS3 實現的Web效果
html添加ico鏡像代碼(favicon.ico放在根目錄)
HTML5還有多遠 開發者的機會
通過iframe實現在body中放frameset
HTML 文本轉義小竅門
防止用戶將表單重復提交的方法匯總
html之簡單網頁表格制作示例介紹
HTML繪制用戶注冊頁面
大家都在看
a 中調用js的幾種方法整理及使用推薦
利用XML數據綁定實現頁面無刷新的數據浏覽
javascript實現英文首字母大寫總結
檢測浏覽器對HTML5和CSS3支持度的方法
Javascrip實現文字跳動特效
Jquery之美中不足小結
JQuery 小練習(實例代碼)
推薦40個簡單的 jQuery 導航插件和教程(下篇)
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved