?

怎么解決瀏覽器兼容性問題

所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px; IE6 專用 *height: 100px;
IE7 專用 * height: 100px; IE7、
FF 共用 height: 100px !important;

1.內(nèi)外邊距被統(tǒng)一:

不同瀏覽器對(duì)HTML標(biāo)記所具有的內(nèi)外邊距屬性具有不同的定義。
因此如果想消除這種差距，應(yīng)該在相應(yīng)的CSS部分加入以下CSS代碼：
*{margin:0px;padding:0px;}
借于此，所有標(biāo)記的內(nèi)外邊距被統(tǒng)一起來。

2.margin不一致的問題：

當(dāng)有多張圖片需要排在一行時(shí)，我們通常使用“Float：Left”來實(shí)現(xiàn)，這樣一來，瀏覽器就存在兼容性問題。導(dǎo)致圖片與后面的內(nèi)容存在margin不一致的問題。對(duì)此一種解決方法就是給圖片添加“Display：inline”項(xiàng)即可。

3.div居中問題：

通常我們會(huì)利用“vertical-align:middle”來實(shí)現(xiàn)，這對(duì)于搜狗瀏覽器來說，是正常的，但是對(duì)于IE瀏覽器來說，卻并沒有效果。對(duì)此，一種較好的解決方法是：將文字的行高h(yuǎn)eight-line:設(shè)置與div一樣時(shí)即可解決問題。

4.important!：

FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決) 如width:115px !important;width:120px;padding:5px;必須注意的是， !important; 一定要在前面。

5.給a標(biāo)簽內(nèi)內(nèi)容加上樣式:

若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)

6.FF 和 IE 對(duì) box 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.

7.ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)

8.外部 wrapper :

作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng)

7.手形光標(biāo):

關(guān)于手形光標(biāo). cursor: pointer.

8.IE6hover的鏈接:

在IE6和IE7下，躲貓貓bug是一個(gè)非常惱人的問題。一個(gè)撐破了容器的浮動(dòng)元素，如果在他之后有不浮動(dòng)的內(nèi)容，并且有一

些定義了:hover的鏈接，當(dāng)鼠標(biāo)移到那些鏈接上時(shí)，在IE6下就會(huì)觸發(fā)躲貓貓。

解決方法很簡單：

1.在（那個(gè)未浮動(dòng)的）內(nèi)容之后添加一個(gè)<span style="clear: both;"> </span>

2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個(gè)簡單的方法就是給其定義height:1%;

9.IE下z-index的bug

在IE瀏覽器中，定位元素的z-index層級(jí)是相對(duì)于各自的父級(jí)容器，所以會(huì)導(dǎo)致z-index出現(xiàn)錯(cuò)誤的表現(xiàn)。解決方法是給

其父級(jí)元素定義z-index，有些情況下還需要定義position:relative。

10.: Overflow Bug

在IE6/7中，overflow無法正確的隱藏有相對(duì)定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;

11.怎么解決IE6雙倍邊距問題display：inline

解決辦法：當(dāng)將其display屬性設(shè)置為inline時(shí)問題就都解決了。

總結(jié)：這個(gè)現(xiàn)象僅當(dāng)塊級(jí)對(duì)象設(shè)置了浮動(dòng)屬性后才會(huì)出現(xiàn)，內(nèi)聯(lián)對(duì)象（行級(jí)對(duì)象）不會(huì)出現(xiàn)此問題。并且只有設(shè)置左邊距和右邊距的值才會(huì)出問題，上下邊距不會(huì)出現(xiàn)問題。

方法二:，!important解決，比如

margin-left:10px !important;;

_margin-left:5px;

?

12. css實(shí)現(xiàn)透明濾鏡

filter:alpha(opacity=12); 支持 IE 瀏覽器

-moz-opacity:0.12; 支持 FireFox 瀏覽器

opacity:0.12; 支持 Opera，safari 等瀏覽器

ps:現(xiàn)在困擾我的就是,背景是實(shí)現(xiàn)了透明效果,可是這個(gè)層里面的所有元素:CSS實(shí)現(xiàn)背景透明效果這幾個(gè)字也跟著透明了.這個(gè)以后我還得努力尋求解決辦法,有待解決!

13.如何對(duì)齊文本與文本輸入框

?

加上 vertical-align:middle;

<style type="text/css">

<!--

input {

???? width:200px;

???? height:30px;

???? border:1px solid red;

???? vertical-align:middle;

}

-->

</style>

?

14.為什么無法定義1px左右高度的容器

IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

?

15.怎么樣才能讓層顯示在FLASH之上呢

?

解決的辦法是給FLASH設(shè)置透明

<param name="wmode" value="transparent" />\

15. 游標(biāo)手指cursor???

cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

更多專業(yè)前端知識(shí)，請(qǐng)上
【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的怎么解决浏览器兼容性问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。