前端相容性相關的問題

2021-10-03 04:06:13 字數 1343 閱讀 2230

首先先解釋一下瀏覽器為什麼會產生相容問題

第乙個是瀏覽器種類很多,但是它們採用的核心無非就是以下幾種

簡稱五大瀏覽器四大核心

1、trident核心 ie核心 ie瀏覽器

2、webkit核心 以前chrome採用的現在是safari採用該核心

3、gecko核心 firefox採用的

4、presto(廢棄)

5、opera最初是自己的presto核心,後來是webkit,現在是blink.

其餘的向國產的瀏覽器無非是在這幾種核心上進行包裝,本質還是這幾種核心

第二是因為核心不同同時各大廠商出於自身利益考慮而設定的種種技術壁壘

第三是由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和**也很難重和

瀏覽器相容問題如何解決

先除錯高版本的chrome與firefox最後除錯ie瀏覽器

常見的瀏覽器相容性問題

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

加上a標籤的時候在ie顯示邊框

hack:border:0或者border:none

2、縫隙

插入的時候會向下撐大3px

hack:display:block或者vertical-align:top

b、表單相關的相容以及解決方法

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

c、1、margin-top的相容

設定了margin-top屬性後,margin-top的屬性值新增給父元素

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

hack2:給父元素新增上邊框

hack3:給父元素新增overflow:hidden;

2、滑鼠指標

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

hack:cursor:pointer

3、透明屬性

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

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

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

hack1:直接切圖

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

html,body

注意:在新版本的谷歌瀏覽器裡已經無效。

hack3:css3的乙個縮放屬性:transform:scale()

例如:.a3

/這個數字0.833,是縮放比例,可以根據你自己的情況不同而不同。/

5、所有瀏覽器的字型不統一

hack:給body統一設定字型 比如font-family:微軟雅黑

CSS瀏覽器相容性相關

瀏覽器相容性 all ie.gte ie 8.ie 8 9.lte ie 7.ie 9 僅ie9支援 ie 7.ie 6.not ie text indent在ie6 ie7中的位置偏移bug text indent一般用來實現文字縮排,不過更多的時候是用來實現文字隱藏。發現在ie6 ie7中,te...

軟體開發中程式相容性相關問題及處理

一.相關概念 向後相容 backward compatibility,向下相容 後 指 落後 即舊的版本。指公升級新版本程式後,能後匯入舊版本程式的資料 個人設定 配置檔案等 及支援原有通訊協議,並正常執行。向前相容 forward compatibility,向上相容 前 指 新 即新 高階 的版...

前端 CSS屬性相關

width 屬性可以為標籤設定寬度 height 屬性可以為標籤設定高度 注意 塊級標籤才能設定寬度,行內標籤的寬度由內容決定 文字型別 font family可以選擇文字的型別 比如 微軟雅黑 宋體 楷體 p字型大小 font size 控制字型大小 p字重 粗細 font weight 用來設定...