IE8 max-width失效引起的对meta标签的思考

@youngwind 2016-03-10 20:22:54发表于 youngwind/blog 兼容性

起因

最近在使用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">

参考资料:

  1. http://fex.baidu.com/blog/2014/10/html-head-tags/
  2. http://padding.me/blog/2014/07/04/mode-or-standard/
  3. http://www.zhoujiping.com/archives/2016/01/quirks-standards.html