国产一级无码视频在线观看,菠萝蜜国际通道一区麻豆

　再談文字溢出問題

作者：zoloadang 　時間： 2008-02-29　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁再談文字溢出問題 [1]
第 2 頁再談文字溢出問題 [2]

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

于是又重新翻了以前懌飛斑竹的帖子，他提到的是注釋引起的文字溢出問題，我今天看的時候發(fā)現(xiàn)在ie7下并沒有產(chǎn)生多豬的問題(以前我沒有裝ie7，所以沒有測試)，今天看到這個新帖子發(fā)現(xiàn)在ie下多了兩個豬，至于解決的方法有很多種，發(fā)出來大家討論下造成這種問題的原理怎么解釋？

代碼如下：

運行代碼框
<!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="PSPad editor, www.pspad.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下是正常的；

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

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="PSPad editor, www.pspad.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="PSPad editor, www.pspad.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="PSPad editor, www.pspad.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 全部選擇提示：你可先修改部分代碼，再按運行]

出處：藍色理想
責(zé)任編輯：bluehearts

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

WEB2.0的單手定則


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx