Tuesday, October 12, 2010

CSS 中 haslayout 相關的問題

Welcome to wonderful IE world !
在IE的世界中，layout 的問題一直是網頁開發者的痛。前幾天在處理一個CSS : inline-block的問題，找了一些資料，蠻值得記錄下來。
As of Microsoft Internet Explorer 6, when the !DOCTYPE declaration specifies strict standards compliance, inline elements ignore the width property and the height property.By setting the width property and the height property, you cannot cause the element to have layout.By setting the contentEditable property to true, you can cause an element to have layout.
The following elements always have layout: BODY, IMG, INPUT, TABLE and TD.

在IE6之中, 當DOCTYPE的定義是strict standard的時候, 內聯(inline)元素(element)會忽略width還有height屬性。必須
1.設定使它擁有layout，
2.或是設定contentEditable，這會自動給元素一個 layout (Flyworld : 踏馬的一點實際作用都沒有)
下列元素總是擁有layout : BODY, IMG, INPUT, TABLE and TD.

  • 擁有Layout會有什麼好處 ?!

在經典文章 On having layout 中有提到很多個部分，其中一個就是我用到的inline-block。

在IE 6 的世界中，display : inline-block這個CSS有被實作，但是必須滿足特定的條件才會有正確的行為(唔…好吧 基本上行為還是沒有正確..只是比較正確)

滿足的條件有兩個 (參考 IE7-/Win: inline-block and hasLayout 適用 IE 5.5 ~ IE 7 )

  1. 必須是內聯元素 (inline  element)   
  2. 擁有layout 

    • 內聯元素

在IE 的世界中Dom element 的display 屬性有預設值，如果很幸運預設inline，那就直接滿足上述第一個條件，相反的，為了滿足條件只能指定display 的值。

舉例而言 div 預設的 display 是 block ，則必須加上 display: inline; span 預設的 display 是 inline 則什麼都不用做

那 預設display 到底是什麼 ?  請參看這篇  MSDN :　display Attribute | display Property

    • 擁有Layout

沒有layout讓你排版亂糟糟，有了layout的確可以幫到忙　（迷：可能也會幫倒忙…)

讓Dom element 擁有 layout 屬性的方式，在此我稱為Trigger ，右邊的則是會拿掉layout 

Trigger  in IE 6 Trigger no layout

display: inline-block
height: any value
width: any value
float: left or right
position: absolute
writing-mode: tb-rl (IE ONLY CSS)
zoom: any value (IE ONLY CSS)
haslayout: -1 (根本就是自己來)

height: auto
width: auto
float: none
position: static
writing-mode:  lr-t
zoom: normal

Trigger  in IE 7 Trigger no layout

min-height: any value
max-height: any value
min-width: any value
max-width: any value
overflow: any value
overflow-x: any value
overflow-y: any value
position: fixed

max-height:none

max-width: none
overflow: visible
overflow-x: visible
overflow-y: visible

在IE 6 使用時必須相當小心，假設我現在需要一個div 是以inline-block方式呈現，則必須作如下的設定才行(三種範例都可以達到效果)

div {
  display: inline-block;
  display: inline;
}		 div {
  zoom: 1;
  display: inline;
}		 div {
  width: 30px;
  display: inline;
}

span的話就少掉inline那一行，Trigger還是要

span {   display: inline-block; }

 

你以為這結束了嗎?　　對阿，結束了

 

但是真正的戰爭都是發生在AP裡頭 (wink)…………

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)