小心:CSS代碼書寫順序不同,導致顯示效果不一樣_經驗交流

來源:互聯網
上載者:User
無意中發現,針對同一HTML標記,在CSS中同時應用了font和line-height屬性時,就得小心了,這二者的書寫順序不一樣,會導致顯示效果不同。
即:
>>> 如果先寫font,再寫line-height,顯示效果正常
>>> 如果先寫line-height,再寫font,則line-height定義的效果會丟失,在IE、Firefox、Opera下都出現這種BUG

具體效果請看以下代碼:
<p>h1:</p> <h1 style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專註Web技術,體驗開發樂趣!</h1> <h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專註Web技術,體驗開發樂趣!</h1> <p>div:</p> IECN.Net - 專註Web技術,體驗開發樂趣! IECN.Net - 專註Web技術,體驗開發樂趣!
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    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.