search

youngwind / blog

梁少峰的个人博客
4.66k stars 385 forks source link

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

Open youngwind opened 8 years ago

youngwind commented 8 years ago

起因

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