1.如果圖片加a標簽在IE9-中會有邊框
解決方案:
|
1
|
img{
border
:
none
;}
|
2.rgba不支持IE8
解決方案:可以用 opacity
eg:
opacity:0.7;/*FF chrome safari opera*/ filter:alpha(opacity:70);/*用了ie濾鏡,可以兼容ie*/
但是,需要注意的是,opacity會影響里面元素的透明度
3. display:inline-block ie6/7不支持
解決方案:
|
1
2
|
display
:inline-
block
;
*
display
:
inline
;
|
4.默認的body沒有body去掉margin情況下ie5、6、7邊緣會很寬margin-top加倍 如果處於無聲明狀態那么所有的ie瀏覽器margin-top加倍
解決方案:用css給body添加magin屬性為0px
|
1
|
body{
margin
:
0
;}
|
5.IE 6.0 Firefox Opera等是 真實寬度=width+padding+border
IE5.X 真實寬度=width
解決方案:
方法1.
div.content {
width:400px; //這個是錯誤的width(對於ie5來說是正確的），所有瀏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的內容
voice-family:inherit;
width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的
}
方法2.
div.content {
width:300px !important; //這個是正確的width，大部分支持!important標記的瀏覽器使用這里的數值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用
}
6.height不能小於16px,設置較小高度標簽（一般小於10px），在IE6，IE7，遨游中高度超出自己設置高度
解決方案:overflow設置為hidden
7.min-height不兼容 ie6 7解釋為超過高度就撐開，而其他版本瀏覽器則遮蓋下面的層
解決方案:min-height:200px; height:auto !important; height:200px; overflow:visible;
8.position:fixed IE5、6無法識別此屬性
解決方案:
<!--[if lte IE 6]>
<style type="text/css">
html {
/*這個可以讓IE6下滾動時無抖動*/
background: url(about:black) no-repeat fixed
}
#demo_t, #demo_b, #demo_l, #demo_r {
position: absolute;
}
#demo_t, #demo_b {
/*這個解決body有padding時，IE6下100%不能鋪滿的問題*/
width: expression(offsetParent.clientWidth);
}
/*下面三組規則用於IE6下top計算*/
#demo_l, #demo_r {
top: expression(offsetParent.scrollTop + 300);
}
#demo_t {
top: expression(offsetParent.scrollTop);
}
#demo_b {
top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
}
</style>
<![endif]-->
9.浮動的div有margin_left屬性ie6會加倍 無論兼容視圖還是無聲明視圖
解決方案:
方案一: IE6唯一識別屬性_的方式加_display屬性_display:inline;
方案二:
條件注釋<!--[if lte IE 6]>
<style>
.on{ display:inline }
</style>
<![endif]-->
10.cursor兼容 自定義指針cur格式的圖片url路徑問題無論是兼容還是無聲明版本
解決方案:cursor:url(Hand.cur), url(/Hand.cur), auto;
11.png圖片 IE6里面的png圖片不能透明 兼容版本和無聲明版本都是
解決方案:
<!--[if IE ]>
<style type="text/css">
#DIVname{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
}
</style>
<![endif]-->
12.img浮動 img標簽打回車會造成每個圖片之間有縫隙
解決方案:可以刪除之間的回車鍵也可以讓這些圖片浮動
13.在IE瀏覽器下 input type="text"文本框點擊時后面會出現"X",以及type="password"后面會出現眼睛,如何除去這兩種默認樣式:
|
1
|
::-ms-clear,::-ms-reveal{
display
:
none
;}
|
注:IE9-不識別
14.CSS3前綴 -webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera
動畫、過渡、background-size 都需要加前綴
eg: 動畫
@-webkit-keyframes name{
0%{動畫開始的css樣式;}
100%{動畫結束的css樣式;}
}
-webkit-animation:name 8s infinite linear;
過渡:
|
1
2
3
|
div.box{
bottom
:
-40px
;<br> -webkit-transition:
all
.
3
s ease-in-out
0
s;
}
|
注:但是過渡不兼容IE8-,可以用JS動畫實現
background-size 同樣也不支持IE8,可以考慮用img
15.漸變
解決方案:
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #35FEA1, #6E9DFF);/* IE 10 */
background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/
16.PIE.htc 可以實現很多css3屬性在IE下的兼容性 如:圓角、陰影、漸變
(1) 圓角 border-radius
.signBtn{
height: 40px;
background-color:#08BCD2;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
behavior: url(css/PIE.htc);
}
(2)陰影 box-shadow
.box{
width:200px;
height:200px;
-webkit-box-shadow:1px 0 10px;
-moz-box-shadow:1px 0 10px;
box-shadow: 1px 0 10px;
background-color: #fff;
behavior: url(css/PIE.htc);/*IE邊框陰影*/
}
(3)背景透明rgba
.box{
background-color:rgba(12, 154, 171, 0.29);
behavior: url(css/PIE.htc);
-pie-background:rgba(12, 154, 171, 0.29);
}
(4)漸變
.box{
width:200px;
height:400px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
background:-moz-linear-gradient(#9F9, #393);
-pie-background:linear-gradient(#9F9, #393);
behavior:url(pie.htc);
}
注:PIE.htc文件路徑相對是相對於css文件,並非html文件,以上例子是將PIE.htc文件放在與css樣式文件同一個文件夾css內,而對應的html問價與css文件夾同級
17.JS實現點擊跳轉到指定位置
$(".arraw-bt").click(function(){
var scroll_offset = $("#section").offset();
console.log(scroll_offset);
$("body,html").animate({//如果只寫body,只被chrome支持 只被chrome支持 Firefox和ie不支持
"scrollTop":scroll_offset.top
},0);//此處0寫上會一下跳轉到指定位置,若不寫會有過渡效果
/});