在瀏覽器之間統一字體大小，使用百分號

quguiliang 13年前發布 | 2K 次閱讀

我發現，如果使用絕對的px來規定字體大小的話，在非ie的瀏覽器里面可以僅針對于文字進行縮放，但是可能會破壞布局，而將整個頁面縮放的功能則比較常用簡單。但是，在ie6下面，沒有整體縮放這個功能，而如果仍然用px來定義大小，那么將導致調整文字大小這個功能失效。也就是說，用px，ie6下就沒辦法改變字體大小的。

 

而如果我們不用px定義大小而用百分號的話。ie6下的默認字體大小會比ff偏大一些，所以不能直接在body里面定義百分號。于是就想到了hack。

 

我單獨開一個css文件，叫ie6.css講關于ie6的hack全部都放在這里面，這樣便于管理。

 

里面寫道

<DIV class=dp-highlighter>

<DIV class=bar>

<DIV class=tools>Html代碼 </DIV></DIV>

<OL class=dp-xml>

  • body{   

  •     font-size:70% !important;   

  • }  
    • </OL></DIV><PRE style="DISPLAY: none" class=html title=在瀏覽器之間統一字體大小，使用百分號 pre_index="0" source_url="

     有人說ie6不是不支持!important的嗎？其實ie6是支持的，但是是有bug的，利用這個bug可以做hack。我們這里沒有用這個bug。

     

    再在正常的css文件里面寫道

    <DIV class=dp-highlighter>

    <DIV class=bar>

    <DIV class=tools>Html代碼 </DIV></DIV>

    <OL class=dp-xml>

  • body {   

  •     color: black;   

  •     font-family: Tahoma, Helvetica, Arial,"\5fae\8f6f\96c5\9ed1" ,"\5b8b\4f53",sans-serif;   

  •     font-size:85%;   

  • }  
    • </OL></DIV><PRE style="DISPLAY: none" class=html title=在瀏覽器之間統一字體大小，使用百分號 pre_index="1" source_url="

    可以看到font-size是有區別的。

     

    那么怎么讓ie6加載ie6.css呢？我們用條件注釋來做。

     

    <DIV class=dp-highlighter>

    <DIV class=bar>

    <DIV class=tools>Html代碼 </DIV></DIV>

    <OL class=dp-xml>

  • <!--[if IE 6]>  

  • <link rel="stylesheet" href="6.css}" />  

  • <![endif]-->    
    • </OL></DIV><PRE style="DISPLAY: none" class=html title=在瀏覽器之間統一字體大小，使用百分號 pre_index="2" source_url="

     

    這樣就ok了。

     

    在body子元素的字體大小定義中，用em來代替px。這樣整個頁面都可以同步。

    另外用em來當做line-height:padding、margin或者是border也可以達到同步的效果，很不錯的哦！

     本文由用戶 quguiliang 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！