前端開發之 各瀏覽器相容總結

2021-10-03 04:06:13 字數 1402 閱讀 4726

css

不同瀏覽器預設的margin和padding不同

解決方案:css裡*

預設有間距

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

解決方案:使用float屬性為img布局

備註:因為img標籤是行內屬性標籤,所以只要不超出容器寬度,img標籤都會排在一行裡,但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正確的(ps:不建議使用負margin,雖然能解決,但是負margin本身就是容易引起瀏覽器相容問題的用法,所以禁止使用)

標籤最低高度設定min-height不相容

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

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

備註:在b/s系統前端開時,有很多情況下我們又這種需求。當內容小於乙個值(如300px)時。容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個相容性問題。

字型大小定義不同

問題症狀:對字型大小small定義不同,firefox為13px,而ie為16px,差別比較大 

解決方法:使用指定的字型大小如14px或者使用em

游標手形,cursor:hand顯示手型在safari上不支援

問題表現:firefox不支援hand,但ie支援pointer

解決方案:統一使用cursor:pointer;

web標準中無法設定ie瀏覽器滾動條的顏色

原來樣式設定為:

body

解決方案,把body換成html

列表類ul標籤在ff中預設是有padding值的,在ie中只有margin有值,先定義

ulul和ol列表縮排問題消除ul,ol等列表的縮排時,樣式應寫成:

js

const問題

說明:firefox下,可以使用const關鍵字來定義常量;ie下,只能使用var關鍵字來定義常量。

解決方法:統一使用var關鍵字來定義常量

事件繫結

ie:dom.attachevent();

其他瀏覽器:dom.addeventlistener();

標準瀏覽器採用事件捕獲的方式對應ie的事件冒泡機制(即標準由最外元素至最內元素或者ie由最內元素到最外元素)最後標準方亦覺得ie這方面的比較合理,所以便將事件冒泡納入了標準,這也是addeventlistener第三個引數的由來,而且事件冒泡作為了預設值

阻止事件冒泡寫法,

阻止預設事件寫法

ajax略有不同

ie:activexobject

其他:xmlhttpreuest

前端開發 瀏覽器相容問題總結

ie8 以下版本不支援html5語義化標籤 現象 我是header標籤,我應該獨佔一整行header 解決方案 方案1 在瀏覽器解析標籤之前,動態建立一下 header 標籤,瀏覽器就認識了document.createelement header 方案2 預設行內,需要轉成塊級header 但是 ...

各瀏覽器相容hack 寫法

在我們設計 或者在製作主題的時候都需要用到css,但是現在瀏覽器特別多,每種瀏覽器顯示的效果不一樣我們怎麼來區別這些惱人的瀏覽器顯示問題呢?今天分享一篇區別各個瀏覽器相容性呢 針對樣式名 如果只讓ie6看見用 html head 如果只讓ie7看見用 html head 如果只讓ff看見用 root...

相容各瀏覽器的iframe onlaod事件

上次工作中,在使用 iframe formsubmit進行無重新整理提交時,如果後台返回的資料有延遲,或者瀏覽器對iframe內容的更改過慢的話,會遇到onload響應在iframe內容改變之前觸發,這也就導致了我不能獲得我所需要的資料。之後的解決方法是使用jquery的load事件。但是總希望自己...