常見兼容性問題
1、png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.
2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的
*{margin:0;padding:0;}來統一。
3、IE6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設置的大。
5、這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入 ——display:inline;將其轉化爲行內屬性。(這個符號只有ie6會識別)漸進識別的方式,從總體中逐漸排除局部。
6、首先,巧妙的使用“\9”這一標記,將IE遊覽器從所有情況中分離出來。
接着,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
css
.bb{
background-color:red;/*所有識別*/
background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
7、 IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統一通過getAttribute()獲取自定義屬性。
8、IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
9、解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
10、 Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
11、超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
IE6下常見bug及解決方法
ol內li的序號全爲1,不遞增。解決辦法:爲li設置樣式display:list-item;
IE6不支持min-height,解決辦法使用css hack:
.target {
min-height:100px;
height: auto!important;
height: 100px; // IE6下內容高度超過會自動擴展高度 }
IE6在設置 height 小於 font-size 時高度值爲 font-size ,解決辦法: font-size: 0;
IE6不支持PNG透明背景,解決辦法: IE6下使用gif圖片
IE6-7不支持 display: inline-block 解決辦法:設置inline並觸發hasLayout
display:inline-block;
display:inline;
zoom: 1;
IE6下浮動元素在浮動方向上與父元素邊界接觸元素的外邊距會加倍。解決辦法: 1)使用padding控 制間距。 2)浮動元素 display: inline; 這樣解決問題且無任何副作用:css標準規定浮動元素 display:inline會自動調整爲block
通過爲塊級元素設置寬度和左右margin爲auto時,IE6不能實現水平居中,解決方法:爲父元素設 置 text-align: center;
IE5-8不支持 opacity ,解決辦法:
.opacity{opacity:0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
未定位父元素 overflow: auto; ,包含 position: relative; 子元素,子元素高於父元素時會溢出。 解決辦法:1)子元素去掉 position: relative; ; 2)不能爲子元素去掉定位時,父元素 position: relative;
<style type="text/css">
.outer {
width: 215px;
height: 100px;border:1px solid red;
overflow: auto;
position:relative; /* 修復bug */
}
.inner {
width: 100px;
height:200px;
background-color: purple;
</style>
<div class="outer">
<div class="inner"></div>
</div>
IE6只支持 a 標籤的 :hover 僞類,解決方法:使用js爲元素監聽mouseenter,mouseleave事件,添加 類實現效果:
<style type="text/css">
.p:hover, .hover{background: purple; }
</style>
<p class="p" id="target">
aaaa bbbbb
<span>DDDDDDDDDDDd</span>
aaaa lkjlkjdf j
</p>
<script type="text/javascript">
function addClass(elem, cls){
if(elem.className){elem.className += ' '+ cls; }
else {elem.className = cls;}
}
function removeClass(elem, cls){
var className = ' ' + elem.className + ' ';
var reg = new RegExp(' +' + cls + ' ','g'); elem.className = className.replace(reg, ' ').replace(/^ +| +$/, ''); }
var target = document.getElementById('target');
if (target.attachEvent) { target.attachEvent('onmouseenter', function () { addClass(target, 'hover'); });
target.attachEvent('onmouseleave', function () { removeClass(target, 'hover'); })
}
</script>