1.如果圖片加a標簽在IE9-中會有邊框
解決方案:
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不支持
解決方案:
display:inline-block;*display:inline;
4.默認的body沒有body去掉margin情況下ie5、6、7邊緣會很寬margin-top加倍 如果處于無聲明狀態那么所有的ie瀏覽器margin-top加倍
解決方案:用css給body添加magin屬性為0px
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"后面會出現眼睛,如何除去這兩種默認樣式:
::-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;過渡:
div.box{ bottom:-40px;<br> -webkit-transition:all .3s ease-in-out 0s;}注:但是過渡不兼容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寫上會一下跳轉到指定位置,若不寫會有過渡效果 /});以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
