仅IE浏览器中父容器无法包裹子元素问题求助

首先，咱们先排查最常见的IE兼容性问题——毕竟IE对HTML5元素和CSS属性的支持一直比较“特殊”：

1. 让IE识别HTML5的<main>元素 #

IE 8及更早版本根本不认识<main>这类HTML5新标签，默认会把它们当作行内元素处理，这就直接导致背景、宽高这些样式无法正常生效。解决办法有两个：

• 方法一：添加HTML5 Shiv脚本
  在页面的<head>里加入针对IE的条件注释脚本，让老IE能识别HTML5元素：

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

（如果不想用外部脚本，也可以手动在CSS里声明：main { display: block; }，这能强制IE把它当作块级元素渲染）

2. 检查CSS布局的IE兼容性 #

如果<main>已经被识别，但背景还是不显示，大概率是高度塌陷或者盒模型兼容的问题：

• 清除浮动（如果wrapper里有浮动元素）
  如果#wrapper内部的元素用了float，IE里很容易出现高度塌陷，导致背景无法铺满。可以给#wrapper加清除浮动的样式：

#wrapper {
  overflow: hidden; /* 简单粗暴的清除浮动方式 */
}
/* 或者用兼容性更好的伪元素清除法 */
#wrapper::after {
  content: "";
  display: table;
  clear: both;
}

• 修复min-height的IE兼容
  如果你的#wrapper用了min-height，IE 6-7不支持这个属性，可以用IE专属的表达式来兼容：

#wrapper {
  min-height: 500px; /* 正常浏览器生效 */
  _height: 500px; /* 仅IE6识别，模拟min-height效果 */
}

3. 确保页面处于标准渲染模式 #

别忘了在页面最顶部加上DOCTYPE声明，避免IE进入怪异模式（quirks mode）——怪异模式下很多CSS规则都会失效：

<!DOCTYPE html>

按照这几步调整后，IE里的main#wrapper应该就能正常显示红色背景和完整布局了。你可以先试试HTML5 Shiv和清除浮动的组合，这是最常见的解决思路~

内容的提问来源于stack exchange，提问作者Kim