1. 程式人生 > >瀏覽器的兼容性問題與解決

瀏覽器的兼容性問題與解決

padding 瀏覽器兼容性 遨遊 pla auto table ie7 兼容性問題 不同的

所謂的瀏覽器兼容性問題,是因為不同瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不同的情況。而我們的需求是不同瀏覽器打開我們的網站效果是一致的,所以前端開發之前必須把兼容性問題解決。

一:不同瀏覽器內容之間默認的內邊距與外邊距不同。

解決:在css開頭裏加入 * { padding : 0; margin : 0 ; } *通配符來設置瀏覽器的內,外邊距都為0。

二:設置塊級margin X像素時,ie6顯示margn比設置打的大。

解決:同樣css中加入 * { padding : 0; margin : 0 ; } ,這個樣式解決很多兼容問題。

三:設置 min-height樣式時,ie6,ie7,遨遊超出自身設置的高度。

解決:給超出的高度標簽設置 overflow:hidden ,或者設置行高line-height 小於你設置的高度。

四:行內標簽設置 display : block 設置float : left後,ie6仍然存在邊距問題。

解決:在display : block; 後面加入display : inline;display : table。

五:圖片默認有間距

解決:使用float屬性或者margin布局。

第六:標簽最低高度設置min-height不兼容

解決:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:{ min-height : 200px; height : auto !important; height : 200px; overflow : visible; }

第七:透明度的兼容

解決:CSS hack。 我們可以把瀏覽器分為三類:ie6,ie7,遨遊。ie6使用 _ 開頭,ie7使用 * 開頭,ie8使用 /9結尾。

瀏覽器的兼容性問題與解決