瀏覽器常見的相容都有哪些？以及解決方法是什麼？

2021-10-04 00:07:19 字數 2356 閱讀 4143

a、跟img相關的相容以及解決方法

1) 有邊框bug

img
2）縫隙

hack1:將

img
hack2：給img新增宣告 vertical-align：top/middle；

img
b、表單相關的相容以及解決方法1）表單元素距離頂部間距不一致

hack:給表單元素新增宣告：float:left;

input
c、其他相關相容和解決方法1）margin-top的相容

子元素沒設定任何浮動，設定了margin-top屬性後，會錯誤的把margin-top的屬性值新增給父元素

hack1:給子元素或者父元素設定浮動

.box
或者

.box p
hack2：給父元素新增上邊框

.box
hack3：給父元素新增overflow：hidden；

.box
2）滑鼠指標bug

描述：cursor屬性的hand屬性值只有ie9以下瀏覽器識別，其它瀏覽器不識別該宣告。

hack：cursor:pointer

div
3）透明屬性

相容其他瀏覽器寫法：opacity:value;(value的取值範圍0-1;)

div
ie瀏覽器寫法：filter:alpha(opacity=value);取值範圍 0-100(整數)

div
4）谷歌瀏覽器最小字型大小支援到12px，12px以下的字型大小不支援

hack1：直接切圖

hack2：在html或者body裡新增一句谷歌瀏覽器專有的屬性  

html,body


/*  注意點：在新版本的谷歌瀏覽器裡已經無效。*/
hack3：css3的乙個縮放屬性：transform:scale()

.a3


/*這個數字0.833，是縮放比例，可以根據你自己的情況不同而不同。*/
5）所有瀏覽器的字型不統一

hack：給body統一設定字型

body
a、png24格式的相容，png24格式在ie6上不透明hack1：把png24格式換成png8或者gif格式

hack2：**如下

div
b、預設高度 (如果是需要看不見一定要加height：0；如果是需要其他的數值，那麼就給其他的數值)描述：在ie7或者ie6及以下版本中，部分塊元素擁有預設高度（在16px左右；）

hack1:給元素新增宣告：font-size:0;

div
hack2：給元素新增宣告：overflow:hidden;

div
c、雙倍浮向（雙倍邊距）（只有ie6出現）描述：當ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。

hack:給浮動元素新增宣告：display:inline;

li
d、在ie6及更低版本的瀏覽器裡，如果想去掉input的預設邊框，不能設定border：none；hack：設定input

img
e、如果設定了input的高度，在其他瀏覽器上顯示的value的內容是垂直居中的，但是在ie6上是在頂部的hack：給input新增乙個行高等於它的高度。

input
f、在ie6及以下版本中在解析百分比時，會按四捨五入方式計算從而導致50%加50%大於100%的情況。（也會受系統影響）hack：給右面的浮動元素新增宣告：clear:right;

div
g、ie7及以下瀏覽器li有時候會莫名的向下撐大3-4畫素。hack:給li新增乙個 +margin-top：-3px或者-4px

li

瀏覽器常見相容點

window.event 問題 使用 window.event 無法在ff上執行 解決方法 ff的 event 只能在事件發生的現場使用，此問題暫無法解決。可以把 event 傳到函式裡變通解決 onmousemove functionname event function functionname...

常見瀏覽器相容1

瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果，這種技術 hacker。瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤，不加...

瀏覽器常見的相容問題以及處理辦法

ie8中邊框問題 ie8 中放在a標籤中顯示邊框。解決方案 imgie8中背景復合屬性寫法問題 如下 在標準瀏覽器中均能正常顯示背景，但是在ie8中顯示異常。bg解決方案 在url和no repeat之間加上空格 bg其他ie低版本相容性問題了解 1.在 ie6 及更早瀏覽器中定義小高度的容器？解決...