當(dāng)前位置 : 首頁>軟件學(xué)院>程序開發(fā)>CSS>正文

CSS解決瀏覽器的等寬空格問題

http://www.yibo1263.com　2008-10-9 8:39:29 　來源:東北IT網(wǎng) 　編輯:葉子

　　很多時(shí)候，希望能夠在 HTML 中使用空格排版。但瀏覽器在解析 HTML 時(shí)，會(huì)把連續(xù)的空格解析成一個(gè)，所以我們會(huì)使用   等這樣的占位符。

　　但是   也不是很可靠，比如空格間距非常大，那么我們必須增加多個(gè)占位符，同時(shí)頁面的體積會(huì)變得非常大。

　　同時(shí)，注意到 Safari 中的   寬度是已設(shè)定字符的空格寬度（Safari 的默認(rèn)字體為 Times），也就是說一個(gè)中文字符需要兩個(gè)占位符。

　　具體情況如下圖所示：

　　 css

　　其實(shí)，這不是 Safari 的問題，而是字體的問題。解決的方式就是使用下面的屬性

　　font-family: '宋體';將 Safari 的默認(rèn)字體設(shè)置成“宋體”等中英文等寬的字體，就能解決。Windows 版本的 Safari 字體設(shè)置，需要直接使用中文“宋體”這樣的名稱而不是“Simsun”（了解原因的兄弟請(qǐng)告訴我）。

　　但至此，我們的根本目標(biāo)沒有解決，就是能否避免使用   這樣的占位符，而使用“原生”的空格�？紤]針對(duì)空白的相應(yīng) CSS 屬性，具體了解有關(guān) white-space 的用法，接下來就比較好處理了。

　　總結(jié)下使用 white-space 實(shí)現(xiàn)等寬空格的條件，有兩個(gè)。需要設(shè)置對(duì)應(yīng)的屬性

　　white-space: pre;

　　然后設(shè)置等寬字符（包括等寬空格）即可。綜合起來，就是這樣

　　font-family: '宋體', Simsun;

　　white-space: pre;

　　由于使用了中文 CSS 名稱，所以在實(shí)際使用中需要考慮樣式的字符編碼問題。同時(shí)，需要額外考慮的是，蘋果機(jī)是否有“宋體”（或者其他等寬的字體），有蘋果機(jī)的兄弟請(qǐng)幫忙測(cè)試下。

　　--Split--

　　感謝小馬提供的另外一個(gè)思路，就是使用 em 單位。1em 簡(jiǎn)單的說，就可以認(rèn)為是一個(gè)字符寬度；同理，.5em 就是半個(gè)字符。那么，上面的情況就可以使用這樣寫。

　�。約pan>買＜ins class="half-word">＜/ins>寶＜ins class="half-word">＜/ins>貝：＜/span>＜br />

　　＜span>我的淘寶：＜/span>＜br />

　�。約pan>社＜ins class="two-word">＜/ins>區(qū)：＜/span>＜br />

　　對(duì)應(yīng)的 CSS 應(yīng)為

　　.half-word {width: .5em;}

　　.two-word{width:2em;}

　　經(jīng)測(cè)試通過。

　　--Split--

　　針對(duì)這上述的兩種不同方法，個(gè)人認(rèn)為應(yīng)當(dāng)按照實(shí)際情況考慮采用。比如第一種方法，雖然依賴具體的等寬字體，但沒有添加其他額外的結(jié)構(gòu)，對(duì)于以后的維護(hù)會(huì)更加的方便；第二種方法，則更多的考慮了實(shí)際的應(yīng)用情況（同時(shí)也不用依賴具體的等寬字體），但是也添加了額外的結(jié)構(gòu)。

　　所以，如考慮到以后的可維護(hù)性，同時(shí)“語義”的角度上分析，推崇第一種做法。而實(shí)際的應(yīng)用情況下，同時(shí)需要應(yīng)用比較復(fù)雜時(shí)，個(gè)人會(huì)選用第二種。

【收藏】【打印】【進(jìn)入論壇】

相關(guān)文章：

·CSS3 Media Queries 詳解

·CSS實(shí)例教程:非浮動(dòng)區(qū)域設(shè)置寬度

·css的效率和瀏覽器渲染的速度

·關(guān)于CSS HACK 解決兼容的寫法

·小議使用“完整”的CSS的缺點(diǎn)

·關(guān)于CSS不透明的詳細(xì)介紹

·CSS中設(shè)置段落間距的方法

·用css網(wǎng)站布局之十步實(shí)錄

·DIV+CSS布局代碼精簡(jiǎn)對(duì)SEO的影響

·CSS教程:網(wǎng)頁中英文字體的設(shè)置

·css3文本陰影屬性text-shadow說明

亚洲AV无码乱码在线观看不卡|最新大伊香蕉精品视频在线|亚洲不卡av一区二区|国产美女无遮挡免费