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

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:28:25 作者：佚名

首先引起對這個(gè)溢出問題進(jìn)行研究是因?yàn)榭吹揭粋€(gè)朋友的帖子，里面提到ie7下出現(xiàn)的文字溢出問題；于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題，我今天看的時(shí)候發(fā)現(xiàn)在ie7下并沒有產(chǎn)生多豬的問題(以前我沒有裝ie7，所以沒有測試)，今天看到這個(gè)新

首先引起對這個(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.fzitv.net" />

<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.fzitv.net" />

<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.fzitv.net" />

<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.fzitv.net" />

<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)行]
#p#
4.也加上浮動(dòng)效果；
運(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.fzitv.net" />

<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">↑上面就是多出的豬兩個(gè)</a>

<a href="#" class="test">再談豬的問題</a>

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
5.想想如果將外面的main中的寬度設(shè)置去掉后，會(huì)發(fā)現(xiàn)最后個(gè)層并未連續(xù)浮動(dòng)到第三個(gè)層后面，而是另起新行排列；
運(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.fzitv.net" />

<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">↑上面就是多出的豬兩個(gè)</a>

<a href="#" class="test">再談豬的問題</a>

</div>

</body>

</html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
6.將main中的寬度設(shè)定到一定數(shù)值時(shí)也可以是正常的；
運(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.fzitv.net" />

<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">↑上面就是多出的豬兩個(gè)</a>

<a href="#" class="test">再談豬的問題</a>

</div>

</body>

</html>

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

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容