Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
youngwind opened this issue Mar 10, 2016 · 0 comments
Open

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

youngwind opened this issue Mar 10, 2016 · 0 comments
Labels
兼容性

Comments

@youngwind
Copy link
Owner

起因

最近在使用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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
兼容性
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@youngwind