Open
Description
起因
最近在使用max-width的时候发现在IE8下不兼容,具体可以参考这里
解决办法
1. 通过外包div实现
把图片放在div中,并且设置该div的宽度为你原来想让图片的max-width值。
.container { width: 765px;}
img { max-width: 100%;}
2. meta实现
第一种方法治标不治本,之所以出现图片max-width失效的,是因为页面渲染的时候采取了“接近标准模式”,这个跟“标准模式”和“怪异模式”都不同。他们之间的区别和联系可以参考wiki
文档声明和meta标签属性影响浏览器将采取何种模式渲染,那么该如何配置这两项才能规避更多的兼容性问题呢?
// 采取H5的文档声明
<!doctype html>
// 优先采取IE最新版本和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
// 让360浏览器 采取极速模式
<meta name="renderer" content="webkit">
参考资料: