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

2021-09-09 00:22:25 字數 2313 閱讀 8016

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

所有瀏覽器 通用 height: 100px;

ie6 專用 _height: 100px; ie6 專用 *height: 100px;

ie7 專用 *+height: 100px; ie7、

ff 共用 height: 100px !important;

1.內外邊距被統一:

不同瀏覽器對html標記所具有的內外邊距屬性具有不同的定義。

因此如果想消除這種差距,應該在相應的css部分加入以下css**:

*借於此,所有標記的內外邊距被統一起來。

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 . 最好事先宣告, 以避免不必要的麻煩. (常見於導航標籤和內容列表)

7.手形游標:

關於手形游標. cursor: pointer.

在ie6和ie7下,***bug是乙個非常惱人的問題。乙個撐破了容器的浮動元素,如果在他之後有不浮動的內容,並且有一

些定義了:hover的鏈結,當滑鼠移到那些鏈結上時,在ie6下就會觸發***。

解決方法很簡單:

1.在(那個未浮動的)內容之後新增乙個

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;

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

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

15.怎麼樣才能讓層顯示在flash之上呢

解決的辦法是給flash設定透明

\15. 游標手指cursor   

cursor: pointer 可以同時在 ie ff 中顯示游標手指狀, hand 僅 ie 可以

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

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...

瀏覽器相容性問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...