html - IE 11 未被识别为 block 元素

Question

IE 11 是否存在 box-sizing: border-box 问题？

这是假定的结构。 jsfiddle

HTML

<div class="container">
  <div class="left">
  </div>
  <div class="content">
    <div class="mainContent">
    </div>
    <div class="sidebar">
    </div>
  </div>
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.left {
  background: tomato;
  width: 150px;
  float: left;
  bakcground: grey;
  height: 200px;
}
.content {
 margin-left: 175px;
 background: blue;
 height: 200px;
}
.mainContent {
  width: 70%;
  float: left;
  background: orange;
  height: 200px;
}
.sidebar {
  width: 30%;
  float: left;
  background: pink;
  height: 200px;
}

这里是实用的version正在使用。

正如您在此 comparison 中看到的那样应用了边距的主容器宽度在包装器元素上大于 100%，然后包装器元素堆叠列。几乎就像 box-sizing 方法不适用于它？不确定我在这里遗漏了什么。

我也不确定“元素隐藏在基本浏览器中而不是目标中”的含义。在 comparison 上看到页。

Answer 1

如图所示here . <main></main>在 EI11 中不被识别为 block 元素。添加display: block解决了这个问题。

main {
    display: block;
}