DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS解決浏覽器的等寬空格問題
CSS解決浏覽器的等寬空格問題
編輯:布局實例     

  很多時候,希望能夠在HTML中使用空格排版。但浏覽器在解析HTML時,會把連續的空格解析成一個,所以我們會使用等這樣的占位符。

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

 

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

 

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

  具體情況如下圖所示:

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

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

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

  總結下使用white-space實現等寬空格的條件,有兩個。需要設置對應的屬性

  white-space:pre;

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

  font-family:'宋體',Simsun;

  white-space:pre;

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

  --Split--

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

  <span>買<insclass="half-word"></ins>寶<insclass="half-word"></ins>貝:</span><br/>

  <span>我的淘寶:</span><br/>

  <span>社<insclass="two-word"></ins>區:</span><br/>

  對應的CSS應為

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

  .two-word{width:2em;}

  經測試通過。

  --Split--

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved