?

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

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

1.內外邊距被統一:

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

2.margin不一致的問題：

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

3.div居中問題：

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

4.important!：

FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決) 如width:115px !important;width:120px;padding:5px;必須注意的是， !important; 一定要在前面。

5.給a標簽內內容加上樣式:

若需給a標簽內內容加上樣式, 需要設置 display: block;(常見于導航標簽)

6.FF 和 IE 對 box 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.

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

8.外部 wrapper :

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

7.手形光標:

關于手形光標. cursor: pointer.

8.IE6hover的鏈接:

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

些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。

解決方法很簡單：

1.在（那個未浮動的）內容之后添加一個<span style="clear: both;"> </span>

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

9.IE下z-index的bug

在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器，所以會導致z-index出現錯誤的表現。解決方法是給

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

10.: Overflow Bug

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

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

解決辦法：當將其display屬性設置為inline時問題就都解決了。

總結：這個現象僅當塊級對象設置了浮動屬性后才會出現，內聯對象（行級對象）不會出現此問題。并且只有設置左邊距和右邊距的值才會出問題，上下邊距不會出現問題。

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

margin-left:10px !important;;

_margin-left:5px;

?

12. css實現透明濾鏡

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

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

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

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

13.如何對齊文本與文本輸入框

?

加上 vertical-align:middle;

<style type="text/css">

<!--

input {

???? width:200px;

???? height:30px;

???? border:1px solid red;

???? vertical-align:middle;

}

-->

</style>

?

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

IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

?

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

?

解決的辦法是給FLASH設置透明

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

15. 游標手指cursor???

cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以

更多專業前端知識，請上
【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。