瀏覽器兼容問題彙總

1 ie6.0橫向margin加倍

產生因素：塊屬性、float、有橫向margin。
解決方法：display：inline；
2 ie6.0下默認有行高

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；
3 在各個瀏覽器下img有空隙(緣由是：回車。)

解決方法:讓圖片浮動。
4 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。

解決方法：a 在子標籤最後清浮動{<div style="height:0;clear:both;">&nbsp;</div>}
b 父標籤添加{overflow：hidden；}
c 給父標籤設置高度
5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，

解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（由於ie6有一個特徵，當定義一個高度時，若是內容超太高度，元素會自動調整高度。）
6 Ie6裏面：如li設寬、高，而且li裏面的標籤浮動，那麼li之間會有間距

解決方法：li不設寬、高或者li內的標籤不浮動
7 li之間有間距

解決方法：li 設置vertical-align:middle;
8 3像素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三像素問題。

解決方法：用hack技術， 例如：全部瀏覽器通用 height:100px;
ie6專用_height:100px;
ie7專用*+height:100px;
ie6/ie7共用*height:100px;
9 當定義行內元素爲包含框時，且包含框包含的絕對定位元素以百分比爲單位進行定位時，會出現混亂。

解決方法：在行內元素里加入{zoom：1；}
10 當多個浮動元素中間夾雜着HTML註釋語句時，若是浮動元素寬度爲100%，則在下一行多顯示一個上一行最後一個字符。

解決辦法：給浮動元素添加display:inline;。
11 opacity 定義元素的不透明度

filter：alpha（opacity=80）；/*ie支持該屬性*/
opacity：0.8；/*支持css3的瀏覽器*/
12 兩個塊元素，豎向的margin值不增長，會重疊，其間距爲最大margin值。

13 優先級：被!important 註明的css屬性具備最高優先級(.abc{color:red !important;})。但在ie6中!important具備一個bug:在同一組css屬性中，!important不起做用。

14 火狐不識別background-position-y 或background-position-x;

---------------------------2014.01.10補充-------------------------------

15 ie6 不支持 fixed

複製代碼
/*對於非IE6能夠這樣寫*/
#top{
position:fixed;
bottom:0;
right:20px;
}

/*可是IE6是不支持fixed定位的，須要另外重寫*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*使用hack使IE6實現該效果，但這個東東會閃爍，須要如下代碼*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

/*使固定在頂部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}
複製代碼
16 解決 ie6 最大、最小寬高 hack方法

複製代碼
/* 最小寬度 */
.min_width{
min-width:300px;
_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大寬度 */
.max_width{
max-width:600px;
_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
min-height:200px;
_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
max-height:400px;
_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
複製代碼

17 z-index不起做用的 bug

1）ie6下 首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有三個：一、父標籤position屬性爲relative；二、問題標籤含有浮動(float)屬性。
2）全部瀏覽器：它只認第一個爸爸
層級的高低不只要看本身，還要看本身的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

18 ie各個版本hack

複製代碼
/*類內部hack：*/
.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE六、IE7共用*/
.header {width:100px\0;} /* IE八、IE9共用*/
.header {width:100px\9;} /* IE六、IE七、IE八、IE9共用*/
.header {width:330px\9\0;} /* IE9專用*/

/*選擇器Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/
複製代碼

 

------------------------------------------------------------------------

輸入框 一個很基礎的控件 結果出現了兼容性問題
在chrome ie android上頁面正常 結果在Safari和IOS系統裏面輸入框沒法輸入
點擊後有獲取焦點的邊框高亮效果可是不能輸入 查詢資料解決 查詢解決問題以下
這個是一個提交的頁面可是老是沒法輸入進去文字 在uc中是能夠的 可是在微信中
或者ios自帶瀏覽器是沒法輸入的 絞盡腦汁 找了半天 才發現本身多加了一段代碼
(這個代碼是模版中自帶的 我靠)
/*-webkit-user-select: none;
把這行代碼注視掉就能夠了 至於這行代碼做用是什麼 解釋以下
或許你經常不但願用戶在你的網站上選擇文本,不管是不是出於版權的緣由.
一般你們會有js來實現,另外一個方案就是,將-webkit-user-select 和-moz-user-select
的值設爲none.
請謹慎使用這個屬性：由於大部分用戶是來查看信息的,他們能夠複製並存儲下來以備未來之用
,因此這種方法既無用也無效.若是你禁用了複製粘貼功能,用戶仍是能夠經過查看源文件來獲取
到他們想要的內容.搞不懂這個屬性爲何會被webkit和gecko支持.

--------------
大部分狀況下，使用這個屬性的目的是爲了界面的美化，
由於手機端很容易由於用戶長按屏幕出現文本選擇框，
很醜，影響用戶體驗，因此在沒有 複製黏貼這種需求的
頁面裏，通常會使用這個屬性禁止用戶選擇。不過我卻是
沒發現這個屬性會致使輸入框不能輸入
--------------

想不明白 不過-webkit-user-select: none這個確實會致使輸入框不能輸入 在Safari裏面 只要有這個就不行 這個前綴不是chrome的內核嗎 其餘的同屬性均可以 可是隻要有-webkit前綴的這個屬性就出問題了 不明白緣由 ------------------