欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2008年09月02日 15:49:39   作者:  
很多時候,希望能夠在 HTML 中使用空格排版。但瀏覽器在解析 HTML 時,會把連續(xù)的空格解析成一個,所以我們會使用   等這樣的占位符。

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

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

具體情況如下圖所示:

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

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

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

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

white-space: pre;

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

font-family: '宋體', Simsun;
white-space: pre;

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

--Split--

感謝 小馬 提供的另外一個思路,就是使用 em 單位。1em 簡單的說,就可以認為是一個字符寬度;同理,.5em 就是半個字符。那么,上面的情況就可以使用這樣寫。

<span>買<ins class="half-word"></ins>寶<ins class="half-word"></ins>貝:</span><br />
<span>我的淘寶:</span><br />
<span>社<ins class="two-word"></ins>區(qū):</span><br />

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

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

經(jīng)測試通過。

--Split--

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

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

相關(guān)文章

  • Web標準學(xué)習(xí)資源(書籍、網(wǎng)站)推薦

    Web標準學(xué)習(xí)資源(書籍、網(wǎng)站)推薦

    Web標準學(xué)習(xí)資源(書籍、網(wǎng)站)推薦...
    2007-02-02
  • css教程 css和document

    css教程 css和document

    頁面與css之間的聯(lián)系,老手和新手都需要了解
    2008-08-08
  • WEB標準網(wǎng)頁布局中盡量不要使用的HTML標簽

    WEB標準網(wǎng)頁布局中盡量不要使用的HTML標簽

    CSS網(wǎng)頁布局中不推薦使用的HTML標簽,請盡量不要使用這些HTML標簽。
    2008-09-09
  • 解決ie動態(tài)修改link樣式,import css不刷新的問題

    解決ie動態(tài)修改link樣式,import css不刷新的問題

    當我們需要動態(tài)更新link的樣式的時候,通常是直接修改link的 href 屬性。但是如果樣式里有import的樣式表,IE就不會在發(fā)起請求去刷新了(其他瀏覽器都是正常的)
    2008-05-05
  • 網(wǎng)頁制作中十個最好的CSS hacks

    網(wǎng)頁制作中十個最好的CSS hacks

    轉(zhuǎn)自國外網(wǎng)站,本想翻譯成中文,但是細看文章實在是簡單,如果看不懂這個,我想也就沒必要繼續(xù)做前端了。
    2008-02-02
  • 引用字體時圖標無法顯示_字體文件不存在問題

    引用字體時圖標無法顯示_字體文件不存在問題

    最近一個項目,css,js等靜態(tài)資源做了cdn部署,瀏覽網(wǎng)站時發(fā)現(xiàn)font?awesome字體圖標通通不能正常顯示。只有一些奇怪的符號。瀏覽器控制臺報錯信息:font-face引用字體跨域。
    2023-06-06
  • 網(wǎng)頁布局設(shè)計的標準尺寸

    網(wǎng)頁布局設(shè)計的標準尺寸

    許多的網(wǎng)頁設(shè)計在進行網(wǎng)頁布局設(shè)計時,進行界面網(wǎng)頁的寬度尺寸設(shè)計都比較迷茫,800*600尺寸及1024*768尺寸的分辨率下,網(wǎng)頁應(yīng)該設(shè)計為多少像素才合適呢?太寬就會出現(xiàn)水平滾動條了,下面我們就網(wǎng)頁設(shè)計的標準尺寸進行講解.
    2008-03-03
  • 提高CSS文件可維護性的五種方法總結(jié)

    提高CSS文件可維護性的五種方法總結(jié)

    當完成一項前端的工作之后,許多人都會忘記該項目的結(jié)構(gòu)與細節(jié)。然而代碼并不是馬上就能完全定型,在余下的時間里還有不斷的維護工作,而這些工作也許不會是你自己完成。所以,結(jié)構(gòu)優(yōu)良的代碼能很大程度上優(yōu)化它的可維護性。下面列出五種提高CSS文件可維護性的方法,也就是一種較好的CSS樣式指南。
    2008-05-05
  • web標準常見問題集合2

    web標準常見問題集合2

    web標準常見問題集合2...
    2006-11-11
  • html工作中表格&lt;tbody&gt;標簽的使用技巧

    html工作中表格&lt;tbody&gt;標簽的使用技巧

    公司大部分的項目都是基于BS結(jié)構(gòu),UI設(shè)計階段做WEB原型頁面時要把各種交互效果實現(xiàn)出來,與真正的后臺編程不同,就用JS前臺編程來實現(xiàn),讓程序員編程前知道要做成什么樣的效果就行了。
    2008-09-09

最新評論