也談談罪惡的Haslayout–haslayout解決之道

來源:互聯網
上載者:User

什麼是Haslayout?

    顧名思義,它的意思就是 --- has layout,是IE下的特有屬性,通過 IE Developer Toolbar 可以查看 IE 下 HTML元素是否擁有haslayout,在 IE Developer Toolbar 下,擁有 haslayout的元素,通常顯示為“haslayout = -1”。

hasLayout是一種唯讀屬性,有兩種狀態 true/false,當其為true時,代表該元素有自己的布局,否則代表該元素的布局繼承於父元素。

什麼時候表明Haslayout =  false?
    IE瀏覽器下的很多bug都是haslayout = false 引起的,所以出現下列問題,就很可能是haslayout跑出來搗鬼了。
      1.文字消失,截斷
      2.邊框消失
      3.3像素偏差
      4.絕對元素定位錯誤
      5.濾鏡不生效
      6.滾動頁面跳動
      7其他(歡迎補充哦~)

haslayout = true?

  haslayout是一種唯讀屬性,不能人為設定,那該腫麼辦呢?

首先,IE下 有一些元素是預設帶著 haslayout屬性的:
   <table>

  
<td>

   <body>

   <img>

   <hr>

   <input>

   <select>

   <textarea>

   <button>

   <iframe>

  
<embed>

   <object>

   <applet>

   <marquee>

其他的就只能通過設定css 屬性來觸發haslayout = true,注意哦,haslayout = true一旦觸發是無法復原轉的~

觸發的css 目前總結有:(歡迎補充哦)
1.position:absolute
2.float:left/right
3.display:inline-block
4.width,height:除“auto”外的任意值
5.zoom:除"normal"外 ...

and so on

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.