個人整理的FF、IE的最基本的CSS相容技巧

來源:互聯網
上載者:User
  1. float的div一定要閉合。例如:(其中floatA、floatB的屬性已經設定為float:left;)

    <wrapper> <div id="floatA"></div> <div id="floatB"></div> <div id="NOTfloatC"></div> </wrapper>

    這裡的NOTfloatC並不希望繼續平移,而是希望往下排。這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤閉合。在 <div id="floatB"></div> <div id="NOTfloatC"></div> 之間加上<div class="clear"></div> aw提醒您:這個div一定要注意聲明位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在嵌套關係,否則會產生異常。並且將clear這種樣式定義為為如下即可:

    .clear { clear:both; }

    此外,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden; 當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私人屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了相容。例如我的某一個wrapper如下定義:

    .colwrapper { overflow:hidden; zoom:1; margin:5px auto; }

    onhavinglayout-絕對不得錯過,每一個製作CSS以及用指令碼操作DOM的人都不得錯過!

  2. margin加倍的問題。設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline; 例如: <div id="IamFloat"></div> 相應的css為

    #IamFloat { float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/ }

  3. 關於容器的包涵關係很多時候,尤其是容器內有平行布局,例如兩、三個float的div時,寬度很容易出現問題。在IE中,外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
  4. 關於高度的問題如果是動態地新增內容,高度最好不要定義。瀏覽器可以自動調整,然而如果是靜態內容,高度最好定好。(似乎有時候不會自動往下撐開,不知道具體怎麼回事)
  5. 最狠的手段 – !important; 如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略.如下

    .tabd1 { background:url(/tab1.gif) no-repeat 0px 0px !important; /* for FF*/ background:url(/tab1.gif) no-repeat 1px 0px; /* for IE */ }

    值得注意的是,一定要將 xxxx !important 這句放置在另一句之上,具體原因很簡單,就不說了:)

補充:當時發表這篇文章時,並沒有IE7的出現,而且那個時候我也沒有很多地考慮JavaScript。這次更新一些。

一、IE6的border。會自動往外加margin。當第一個box和第二個box之間的margin為a時,如果兩個box都沒有border,那麼IE6、IE7、FF下面都沒問題。當有border時,FF和IE7的border不會佔用它們之間的“空位”,而IE6這個老喜歡“自作聰明”的傢伙就把margin給撐開了。我並沒有調試是否padding也會有這個副作用,我個人懷疑也有,但是既然把問題分析道這一步了,就不贅述了。解決方案就是判斷是否是IE6,然後動態修補margin。其間涉及到js擷取瀏覽器版本、樣式值這些技術。

二、對於塊元素,在IE6下面最好制定寬度才可float起來,尤其是a標籤。

三、在IE下,如果採用了list-style-position:inside,那麼可能會造成li元素強行往前縮排。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.