//a.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>dfdfdfdfdf</div>
</body>
</html>
//b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
iframe{ width: 200px;height: 200px;border:1px solid red;}
iframe body{ background: #ff6600;}
</style>
</head>
<body>
<iframe name="xxx" src="a.html" frameborder="0"></iframe>
</body>
</html>
如上代码展示为：
image.png
body自适应了iframe的高度，并没有遵循 『块级元素高度由其内部文档流元素的高度总和决定 』。
原因在于iframe中的页面没有添加文档声明，所以浏览器启用了怪癖模式Quirks Mode即兼容模式，意味着一个相对较新的浏览器有意模拟旧版浏览器中的许多错误，特别是IE 4和IE 5。
解决方法：添加文档声明即可 ，效果如下图
image.png
参考：
https://segmentfault.com/q/1010000011093352
http://jkorpela.fi/quirks-mode.html
