1.css中相容ie相關語法
1.解決padding
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
2.background-color:
background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/
*background-color: #0066FF; /*IE6、IE7會變為藍色*/
_background-color: #009933; /*IE6會變為綠色*/
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
3.position:fixed(解決ie6)
body {
_background-image: url(about:blank); /*用瀏覽器空白頁面作為背景*/
_background-attachment: fixed; /* prevent screen flash in IE6 確保滾動條滾動時,元素不閃動*/
}
#topNav {
width: 980px;
z-index: 100; /*設定浮動層次*/
overflow: visible;
position: fixed;
top: 50px;
left: 50px; /* 其他瀏覽器下定位,在這裡可設定座標*/
_position: absolute; /*IE6 用absolute模擬fixed*/
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 動態設定top位置*/
_left: expression(documentElement.scrollLeft + 50 + "px"); /*IE6 動態設定top位置*/
/* documentElement.scrollTop 設定浮動元素始終在瀏覽器最頂,可以加一個數值達到排版效果 */
background-color:#0000FF;
height: 31px;
}
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性
4.平角陰影與翹邊陰影
平角陰影 -webkit-box-shadow: 0px 8px 20px rgba(0,0,0,0.6); -moz-box-shadow: 0px 8px 20px rgba(0,0,0,0.6); -o-box-shadow: 0px 8px 20px rgba(0,0,0,0.6); 翹邊陰影 -webkit-transform: skew(12deg) rotate(4deg); -moz-transform: skew(12deg) rotate(4deg); -o-transform: skew(12deg) rotate(4deg); -ms-transform: skew(12deg) rotate(4deg);
img{background: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
*filter:
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}
5.border-radius
box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */
behavior: url(ie-css3.htc); /* 通知IE瀏覽器呼叫指令碼作用於'box'類 */
}
6.z-index (ie 7 )
IE7的z-index
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有沒有z-index都無所謂了,但必須同position(relative或absolute)使用,就跟一個人
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }
----------通用解決方法----------------------------------------------------------------------------------------------------------
.all-goods{ position:absolute; left:53px; top:157px; _left:68px; _top:168px;
width:168px;background:#ffffff;border: solid #2cad00;border-width: 0 2px 2px;
overflow: visible;z-index:999;display:none}
/*解決 火狐 Firefox*/
@-moz-document url-prefix(){.all-goods{position:absolute; left:74px; top:157px;}}
/*解決 火狐 chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.all-goods{position:absolute; left:74px; top:157px;}}
IE8是可以和IE7相容的,簡單一行程式碼,讓IE8自動呼叫IE7的渲染模式
只需要在頁面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8讀到這個標籤,它就會自動啟動IE7相容模式,保證頁面完整展示。
<metahttp-equiv=“X-UA-Compatible”content=“IE=8″>
Google Chrome Frame也可以讓IE用上Chrome的引擎:
<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>
強制IE8使用IE7模式來解析
<metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>
強制IE8使用IE6或IE5模式來解析
<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>
<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>
如果一個特定版本的IE支援所要求的相容性模式多於一種,如:
<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>
ie7 – js中是一個JavaScript庫(解決IE與W3C標準的衝突的JS庫),使微軟的Internet Explorer的行為像一個Web標準相容的瀏覽器,支援更多的W3C標準,支援CSS2、CSS3選擇器。它修復了許多的HTML和CSS問題,並使得透明PNG在IE5、IE6下正確顯示。
使IE5,IE6相容到IE7模式(推薦)
<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7相容到IE8模式
<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8相容到IE9模式
<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>
捐助開發者
在興趣的驅動下,寫一個免費
的東西,有欣喜,也還有汗水,希望你喜歡我的作品,同時也能支援一下。 當然,有錢捧個錢場(右上角的愛心標誌,支援支付寶和PayPal捐助),沒錢捧個人場,謝謝各位。
謝謝您的贊助,我會做的更好!