瀏覽器兼容性問題

時間 2019-11-10

原文原文鏈接

一，如何解決IE7和IE8的BUGjavascript

微軟在IE8提供三種解析頁面的模式
　　IE8 Standard Modes ：默認的最標準的模式，嚴格按照W3C相關規定
　　IE7 Standards Modes ：IE7如今用的解析網頁的模式，開起機關是在<head>中加入 <meta http-equiv="X-UA-Compatible" content="IE=7">
　　Quirks Modes ：IE5用的解析網頁的模式，開起機關是刪除HTML頂部的DOCTYPE聲明
　　注意：不一樣模式間的網頁在IE8中能夠互相 frame ，所以因不會模式下的DOM和CSS渲染不同，因此會引起不少問題，務必注意若是你的頁面對IE7兼容沒有問題，又不想大量修改現有代碼，同時又能在 IE8中正常使用，微軟聲稱，開發商僅須要在目前兼容IE7的網站上添加一行代碼便可解決問題，此代碼以下：css

　　"/9"　例:"margin:0px auto/9;".這裏的"/9"能夠區別全部IE和FireFox.
　　"*"　IE六、IE7能夠識別.IE八、FireFox不能.
　　"_"　IE6能夠識別"_",IE七、IE八、FireFox不能.java

二，css網頁佈局兼容性有哪些要點與訣竅？瀏覽器

IE vs FF佈局

CSS 兼容要點：DOCTYPE 影響 CSS 處理網站

FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行ui

FF: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中firefox

FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 widthhtm

FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式

div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行

cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠

FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格XHTML+CSS兼容性解決方案小集

使用XHTML+CSS構架好處很多，但也確實存在一些問題，不管是由於使用不熟練仍是思路不清晰，我就先把一些我遇到的問題寫在下面。

1.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：

div{margin:30px!important;margin:28px;}
注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：

div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

2.IE5 和IE6的BOX解釋不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時咱們能夠作以下修改：

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的話，請告訴我一聲，謝了！：）

3.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值因此先定義

ul{margin:0;padding:0;}
就能解決大部分問題

4.關於腳本，在xhtml1.1中不支持language屬性，只須要把代碼改成

三，兼容IE5.0、IE5.五、IE6.0、IE7.0、FF1.五、FF2.0的css hack

本CSS Hack代碼範例，能夠直觀顯示各個版本瀏覽器hack的使用。兼容IE5.0、IE5.五、IE6.0、IE7.0、FF1.五、FF2.0。　　IE7.0簡體中文正式版發佈了，對於我等常和網頁打交道的人來講網頁兼容性問題也隨之而來了。IE7.0有一個顯著的改變就是支持!important了，是件好事情，可是也給廣大的在IE6時代使用!important來區分處理IE和FF的網頁製做者帶來了很多問題，Noker也遇到了這個問題，因此翻閱網上資料，寫了下面這個可以兼容現今大多數主流瀏覽器，覆蓋絕大多數用戶的Hack代碼！　　兼容瀏覽器版本：IE5.0，IE5.5，IE6.0，IE7.0，Firefox1.5，FireFox2.0　　CSS代碼：（請注意Hack代碼的順序） #test{width:300px;height:100px;background:#DDD!important;/*FF*/background:#FF0;/*IE5.0*/}#test/*IE5.5+*/{*+background:#C0F!important;/*IE7.0*/*background:#F00;/*IE6.0*/*background /*IE5.5*/:#F90;}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。