引用ie单独样式表,使用ie sss hack如ie6 *html hack等
1.透明PNG图片问题
解决方法:使用JavaScript或CSS Hack解决。// JavaScript解决方法 function fixPNG() { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var img = images[i]; if (img.src.indexOf('.png') != -1) { img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\',sizingMethod=\'scale\')'; img.style.width = 'auto'; img.style.height = 'auto'; } } } // CSS Hack解决方法 img[src$=".png"] { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='scale'); }
2. 3像素偏差问题
解决方法:使用margin: 0px auto;代替margin: auto;
.container { width: 960px; margin: 0px auto; }
3. 双边距问题
解决方法:使用display: block;
或float: left;
。
4.
min-height
和max-height
不支持解决方法:使用
height:auto !important;
代替。.container { height: auto !important; min-height: 300px; max-height: 500px; }
5.
position: fixed;
不支持解决方法:使用
position: absolute;
和expression()
。.fixed { position: absolute; top: expression((0 + (doc.documentElement.scrollTop || doc.body.scrollTop)) + 'px'); left: 0; }
6.
:hover
伪类问题解决方法:使用JavaScript或CSS Hack解决。
// JavaScript解决方法 function addHover() { var elements = document.getElementsByTagName('div'); for (var i = 0; i < elements.length; i++) { elements[i].onmouseover = function() { this.className += ' hover'; }; elements[i].onmouseout = function() { this.className = this.className.replace(' hover', ''); }; } } // CSS Hack解决方法 div:hover { background-color: #f00; }
7.
display: inline-block;
不支持解决方法:使用
display: inline;
和zoom: 1;
。.inline-block { display: inline; zoom: 1; }
8.
text-shadow
不支持解决方法:使用
text-shadow.js
库或CSS Hack解决。// JavaScript解决方法 function addTextShadow() { var elements = document.getElementsByTagName('h1'); for (var i = 0; i < elements.length; i++) { elements[i].style.textShadow = '2px 2px 2px #000'; } } // CSS Hack解决方法 h1 { text-shadow: 2px 2px 2px #000; }
9.box-sizing
不支持解决方法:使用CSS Hack解决。
.box-sizing { width: 200px; padding: 10px; border: 1px solid #000; -ms-box-sizing: border-box; box-sizing: border-box; }
10.
rgba
不支持解决方法:使用CSS Hack解决。
.background { background-color: rgba(255, 0, 0, 0.5); background-color: red \9; /* IE8-9 Hack */ }
11. 等