瀏覽器相容性問題又被稱為網頁相容性或**相容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的相容問題。在**的設計和製作中,做好瀏覽器相容,才能夠讓**在不同的瀏覽器下都正常顯示。
瀏覽器相容的重要性:
**做好了瀏覽器相容,能夠讓**在不同的瀏覽器下都正常顯示
瀏覽器相容能夠給客戶更好的體驗
產生的原因:
因為不同瀏覽器使用核心及所支援的html等網頁語言標準不同;以及使用者客戶端的環境不同(如解析度不同)造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂,錯位。
1、html5標籤
但是低版本的瀏覽器不支援。
我們可以還用div或者在script中建立h5新增的標籤。
2、clear:both;
不想受到float浮動的,就在div中寫入clear:both;
3、列表類
ul標籤在ff中預設是有 padding值的,而在ie中只有margin有值
先定義 ul
ul和ol列表縮排問題消除ul、ol等列表的縮排時,樣式應寫成:
文字陰影(css3)
box陰影(css3)
跨瀏覽器的css透明度
filter: alpha(opacity=
(1-100));
opacity:
(0-1)
;
高度塌陷;
表單元素行高不一致:新增浮動;
按鈕元素預設的大小和樣式不一樣;
滑鼠手指狀顯示 :全部用標準的寫法 cursor: pointer;
主要是各個瀏覽器對事件的支援有很大問題。
1、在標準的事件繫結中繫結事件的方法函式為 addeventlistener,而ie使用的是attachevent
2、事件處理中非常有用的event屬性獲得亦不相同,ie是window.event方式獲得,
獲得目標元素ie為e.srcelement 標準瀏覽器為e.target ,在ie中是不能操作tr的innerhtml的
3、ie日期函式處理與其它瀏覽器不大一致,比如: var year= new date().getyear(); 在ie中會獲得當前年,但是在firefox中則會獲得當前年與1900的差值。
4、獲得dom節點的方法有所差異,其獲得子節點方法不一致。
ie:parentelement parentelement.children
firefox:parentnode parentnode.childnodes
childnodes的下標的含義在ie和firefox中不同,firefox使用dom規範,childnodes中會插入空白文字節點。
一般可以通過node.getelementsbytagname()來迴避這個問題。
5、當html中節點缺失時,ie和firefox對parentnode的解釋不同。
例如:
ie:input.parentnode的值為空節點
firefox:input.parentnode的值為form
解決方法:firefox中節點沒有removenode方法,必須使用如下方法 node.parentnode.removechild(node)
1、ie:trident核心,-ms-
2、chrome:blink;
3、firefox:gecko核心,-moz-;
4、safari瀏覽器核心:-webkit-;
5、opera瀏覽器核心:opera,-o-;
漸進增強
一開始針對低版本的瀏覽器構建頁面,滿足最基本的功能,再針對高階瀏 覽器進行效果,互動,追加各種功能以達到更好使用者體驗
優雅降級
優雅降級指的是一開始針對乙個高版本的瀏覽器構建頁面,先完善所有的功能。然後針對各個不同的瀏覽器進行測試,修復,保證低階瀏覽器也有基本功能
瀏覽器相容性問題
苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...
瀏覽器相容性問題
瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...
瀏覽器相容性問題
解決方案 應該用ie8相容模式瀏覽網頁,而不應該用ie9或ie10渲染模式.很多使用者安裝ie10後發生很多網頁顯示錯亂,就是相容性的原因,因為ie10預設的渲染模式是ie10.此時應該將其改為ie7渲染模式。為什麼用ie6 7渲染模式的原因如下 中國所有網頁肯定都支援ie,支援ie就是支援ie核心...