前端首先要過兼容這一關!所以最近要整理一下關於兼容的問題!以備後用!(部分剽竊,不正確之處我會指出,當然我也會有錯誤,希望大家指出!)
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
睡覺明天繼續!