浏覽器兼容性也就是指針對不同的浏覽器(IE,Firefox,Chrome...)顯示效果可能不一致而產生浏覽器和網頁間的兼容問題。而目前並沒有統一的工具能解決這一問題,對於前端開發人員來說浏覽器的兼容性無疑是開發過程中不可逃避的也是很繁瑣的步驟,那麼當面對這樣的問題時有哪些小技巧呢?
(1)不同浏覽器對高度的識別。 所有浏覽器通用:height: 100px;IE6專用:_height: 100px; *height: 100px;IE7專用:*+height: 100px;
(2)不同浏覽器默認的內外邊距不同。 針對這個問題,我們可以在樣式表中設置*{padding:0;margin:0;},對內外邊距清零來使得浏覽器達到統一,這樣就不會出現不同浏覽器可能出現的內外邊距導致的問題。
(3)Firefox下給div設置padding後會導致width和height相應的增加,但是IE不會。 這樣的話就可以用!important來解決,因為ie6浏覽器不識別!important屬性,這樣css可以設置width:100px !important;width: 120px;padding:0 10px;
(4)margin加倍的問題。 設置float的div在ie下設置的margin會加倍,這其實是一個ie的bug。如果出現這個問題我們可以對div設置display:inline;這樣的話ie就不會顯示加倍問題了。<br /> block與inline兩個元素:block元素的特點是占滿一行,也就是下一個元素會換行,但高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是不會占滿一行會和其他元素在同一行上,不可控制(內嵌元素);
(5)最小寬度與高度的問題。 ie不識別min-這個定義的,在ie裡面就會把width,height當做min-width,min-height來使用,如果只在樣式裡面定義min-width,min-height的話,這樣在ie裡面就識別不出從而沒有寬和高了。所以在設置最小寬和高的時候可以設置寬和高自動。