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

2024-07-11 08:26:03

字體：大中小

來源：轉載

供稿：網友

什么是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

上一篇：CSS3 選擇器基本選擇器介紹

下一篇：CSS3制作日歷實現代碼