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

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

全部瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px; IE6 專用 *height: 100px; 
IE7 專用 *+height: 100px; IE七、
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 能夠

"惟有高屋建瓴，方可水到渠成"