CSS教程:關于文字溢出問題的研究

2024-07-11 08:20:57

字體：大中小

來源：轉載

供稿：網友

首先引起對這個溢出問題進行研究是因為看到一個朋友的帖子，里面提到ie7下出現的文字溢出問題；

于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題，我今天看的時候發現在ie7下并沒有產生多豬的問題(以前我沒有裝ie7，所以沒有測試)，今天看到這個新帖子發現在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 name="generator" content="VeVb editor, www.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">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

在ie6,7下會多出兩個豬，在ff下是正常的；

根據懌飛前面的帖子所講，肯定是浮動造成的問題，只不過這個浮動與懌飛的浮動布局不同，所以多了一個豬；那如果用懌飛帖子中的方法也是可以解決的；

1.用添加<br />的方法

運行代碼框
<!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="VeVb editor, www.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">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

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 name="generator" content="VeVb editor, www.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">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

3.在文字外面再套用<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 name="generator" content="VeVb editor, www.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>↑上面就是多出的豬兩個</div></a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

|||

4.也加上浮動效果；

運行代碼框
<!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="VeVb editor, www.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" class="test">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

5.想想如果將外面的main中的寬度設置去掉后，會發現最后個層并未連續浮動到第三個層后面，而是另起新行排列；

運行代碼框
<!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="VeVb editor, www.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;}</style></head><body><div ><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">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

6.將main中的寬度設定到一定數值時也可以是正常的；

運行代碼框
<!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="VeVb editor, www.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:500px;}</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">↑上面就是多出的豬兩個</a><a href="#" class="test">再談豬的問題</a></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

上一篇：符合web標準的嵌入Flash的方法

下一篇：CSS制作符合網站標準的細線表格