瀏覽器相容性問題及常見的解決方法

2022-07-19 04:36:12 字數 1815 閱讀 3263

一.什麼是瀏覽器相容性問題

瀏覽器相容性問題又稱網頁相容性和**相容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致二產生瀏覽器和網頁間的相容問題。在**的設計和製作中,做好瀏覽器相容,才能夠讓**在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計,瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。

二.瀏覽器相容性問題產生原因

因為不同瀏覽器使用核心及所支援的html等網頁語言標準不同;以及使用者客戶端的環境不同(如解析度不同)造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂,錯位,顯示不出。

三.常見的瀏覽器相容性問題及解決方法

1.不同瀏覽器標籤預設的外邊距和內邊距不同(這是最常見也是最容易解決的)。

問題狀況:隨便寫幾個標籤,在不加樣式控制的情況下,不同瀏覽器的margin和padding的差異較大。

解決方法:在css裡使用:*。

2.塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。

解決方法:在float的標籤樣式中加入:display:inline;將其轉化為行內屬性。

3.設定較小高度標籤(一般小於10px),在ie6、ie7,遨遊中高度超出自己設定的高度。

問題狀況:ie6、7和遨遊裡這個表情的高度不熟控制,超出自己設定的高度。

解決方法:給超出高度的標籤設定overflow:hidden;或者設定行高line-height小於你設定的高度。

4.行內屬性標籤,設定display:block後採用float布局,又有橫行的margin的情況,ie6間距bug。

問題狀況:ie6裡間距比超過設定的間距。

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

5.預設有間距。

問題狀況:幾個img標籤放在一起的時候,有些瀏覽器會有預設的間距,加了問題一中提到的萬用字元也不起作用。

解決方法:使用float為img布局。

6.標籤最低高度設定min-height步相容。

問題狀況:因為min-height本身就是乙個不相容的css屬性,所以設定min-height時不能很好的被給瀏覽器相容。

解決方法:如果我們要設定乙個標籤的最小高度為200px,需要進行的設定為:。

7.透明度的相容css設定。

做相容頁面的方法是:每寫一小段**(布局中的一行或者一塊)我們都要在不同的瀏覽器中看是否相容,當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的,只要我們稍加設定都能輕鬆地解決這些相容問題。如果我們熟悉標籤的預設屬性的話,就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。

/* css hack*/ 

◆ie6認識的hacker 是下劃線_ 和星號 *

◆ie7 遨遊認識的hacker是星號 *

比如這樣乙個css設定:

height:300px;*height:200px;_height:100px; 

ie6瀏覽器在讀到height:300px的時候會認為高時300px;繼續往下讀,他也認識*heihgt, 所以當ie6讀到*height:200px的時候會覆蓋掉前一條的相衝突設定,認為高度是200px。繼續往下讀,ie6還認識_height,所以他又會覆蓋掉200px高的設定,把高度設定為100px;

ie7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了,因為它們不認識_height。所以它們會把高度解析為200px,剩下的瀏覽器只認識第乙個height:300px;所以他們會把高度解析為300px。因為優先順序相同且想衝突的屬性設定後乙個會覆蓋掉前乙個,所以書寫的次序是很重要的。

常見瀏覽器相容性問題

概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同,我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後,又設定了橫向的margin值,在ie6下顯示的margin值比設定的值要大,並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...

常見的瀏覽器相容性問題

1.就是ie6雙倍邊距的問題,在使用了float的情況下,不管是向左還是向右都會出現雙倍,最簡單的解決方法就是用display inline 加到 css裡面去。2.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3...

瀏覽器常見的相容性問題

1.瀏覽器相容問題一 不同瀏覽器的標籤預設的margin和padding不同。解決辦法 2.瀏覽器相容問題二 ie6雙邊距 bug,塊屬性標籤 float 後,又有橫行的 margin 情況下,在 ie6顯示 margin 比設定的大。3.瀏覽器相容問題三 設定較小高度標籤 一般小於 10px 在i...