ie下的佈局(layout)和擁有佈局(hasLayout)

咱們都知道ie瀏覽器和其餘一些瀏覽器有不少表現不一樣的地方,這確實讓人頭疼,ie的表現與其餘瀏覽器不一樣的緣由之一就是咱們今天要說的這個熟悉又陌生的東西:layout是一個專門針對顯示引擎內部工做方式的概念(聽起來好像很官方),佈局問題是許多ie顯示bug的根源。javascript

另外在清除浮動的時候也常常提出觸發haslayout,關於清除浮動的內容,戳這裏!css

windows上的ie使用佈局概念減小它的處理開銷。在理想狀況下,全部元素都控制本身的尺寸和定位,可是在ie中不是所有的元素均可以控制本身的尺寸和定位,固然,這並非沒有緣由的,官方給出的解釋是:這樣會在ie中致使很大的性能問題,ie開發團隊決定只將佈局應用於實際須要它的那些元素,這樣就能夠充分地減小性能的開銷。html

若是一個元素「沒有擁有佈局」,那麼它的尺寸和位置由最近擁有佈局的祖先元素控制。  ( 擁有了佈局的元素會表現會矩形 )java

在默認狀況下,ie中自己本身就擁有佈局的元素包括:windows

  • body
  • html(標準模式)
  • table
  • tr、td
  • img
  • hr
  • input、select、textarea、button
  • iframe、embed、object、applet
  • marquee

 

佈局的概念是ie特有的,他不是css屬性,可是能夠經過javascript獲取到hasLayout,這是一個只讀屬性,不能夠設置,因此咱們不能用js來設置這個屬性。瀏覽器

可是咱們能夠經過設置一些css屬性來使沒有擁有佈局的元素自動擁有佈局,咱們能夠經過設置下面這些屬性:app

  • float: left|right;
  • display: inline-block;
  • width: any;
  • height:any;
  • zoom:any;           //  用zoom來觸發haslayout的擴展內容,戳這裏!
  • writing-mode:tb-rl;

在ie7中如下的屬性也成了佈局觸發器。wordpress

  • overflow: hidden、scroll、auto
  • min-width: any
  • max-widht: 除了none之外的任何值

ie8已經放棄了hasLayout屬性,最後在張鑫旭的博客中我看到了一些對layout的不一樣看法(傳送門佈局

相關文章
相關標籤/搜索