CSS教程:關(guān)于文字溢出問題的研究

2024-07-11 08:43:42

字體：大中小

供稿：網(wǎng)友

首先引起對(duì)這個(gè)溢出問題進(jìn)行研究是因?yàn)榭吹揭粋€(gè)朋友的帖子，里面提到ie7下出現(xiàn)的文字溢出問題；
于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題，我今天看的時(shí)候發(fā)現(xiàn)在ie7下并沒有產(chǎn)生多豬的問題(以前我沒有裝ie7，所以沒有測試)，今天看到這個(gè)新帖子發(fā)現(xiàn)在ie下多了兩個(gè)豬，至于解決的方法有很多種，發(fā)出來大家討論下造成這種問題的原理怎么解釋？
代碼如下：
運(yù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 name="generator" content="WebJX editor, m.survivalescaperooms.com" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Untitled</title><style>*{font-family:"宋體";}.test{display:block;float: left;margin-right:2px;}.main{width:200px;}</style></head><body><div class="main"><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">兩豬兩豬兩豬</a><a href="#" style="color:#f00">↑上面就是多出的豬兩個(gè)</a><a href="#" class="test">再談豬的問題</a></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
在ie6,7下會(huì)多出兩個(gè)豬，在ff下是正常的；
根據(jù)懌飛前面的帖子所講，肯定是浮動(dòng)造成的問題，只不過這個(gè)浮動(dòng)與懌飛的浮動(dòng)布局不同，所以多了一個(gè)豬；那如果用懌飛帖子中的方法也是可以解決的；
1.用添加<br />的方法
運(yù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 name="generator" content="WebJX editor, m.survivalescaperooms.com" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>Untitled</title><style>*{font-family:"宋體";}.test{display:block;float: left;margin-right:2px;}.main{width:200px;}</style></head><body><div class="main"><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">兩豬兩豬兩豬</a><br  /><a href="#" style="color:#f00">↑上面就是多出的豬兩個(gè)</a><a href="#" class="test">再談豬的問題</a></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
2.清楚浮動(dòng)的方法，（這點(diǎn)可以說明是浮動(dòng)引起的錯(cuò)誤）
運(yù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 name="generator" content="WebJX editor, m.survivalescaperooms.com" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>Untitled</title><style>*{font-family:"宋體";}.test{display:block;float: left;margin-right:2px;}.main{width:200px;}</style></head><body><div class="main"><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">兩豬兩豬兩豬</a><a href="#" style="color:#f00;clear:both">↑上面就是多出的豬兩個(gè)</a><a href="#" class="test">再談豬的問題</a></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
3.在文字外面再套用<div></div>
運(yù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 name="generator" content="WebJX editor, m.survivalescaperooms.com" /><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>Untitled</title><style>*{font-family:"宋體";}.test{display:block;float: left;margin-right:2px;}.main{width:200px;}</style></head><body><div class="main"><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">再談豬的問題</a><a href="#" class="test">兩豬兩豬兩豬</a><a href="#" style="color:#f00"><div>↑上面就是多出的豬兩個(gè)</div></a><a href="#" class="test">再談豬的問題</a></div></body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

上一篇：CSS教程:控制網(wǎng)頁文件大小通過精簡CSS實(shí)現(xiàn)

下一篇：符合web標(biāo)準(zhǔn)的嵌入Flash的方法