CSS兼容整理-1

 前端首先要過兼容這一關!所以最近要整理一下關於兼容的問題!以備後用!(部分剽竊,不正確之處我會指出,當然我也會有錯誤,希望大家指出!)

1.居住問題

1).垂直居中.將 line-height 設置爲 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)注:vertical-align好像不是必須的。
2).水平居中. margin: 0 auto;(當然不是萬能,當子的寬度大於父寬度時就會失效。),IE6 text-align:center;還有一點不同margin:0 auto;是用在本身標籤上,而text-align用在父標籤上。

居住問題:http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8

2.ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)

3.作爲外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.

4. 浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE6會產生200px的距離 display:inline; //使浮動忽略} 或者在產生margin的方向上做手腳。若float:left 那margin-right.反之亦然,當然此方法不治本。

5.diplay:inline-block.

在IE下只有用在內斂元素上纔會出現高級瀏覽器的效果,若用在塊級元素上效果和其他瀏覽器是不同的。詳細的附個鏈接:http://www.planabc.net/2007/03/11/display_inline-block/

IE下的inline-block觸發元素的layout.瞭解layout http://www.jsann.com/post/ie_layout_detailed.html

 

睡覺明天繼續!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章