IE9 中的负边距和浮点数

Question

我正在尝试完成一个 3 列的流体布局，底部有一个额外的跨度，覆盖了最后 2 列。此外，我需要使用源排序，以便中间列实际上是标记中的第一列。

我在这里有一个在 chrome/safari/firefox 中工作的小提琴示例：http://jsfiddle.net/66krg9cr/6/

<div class="container">
  <div class="middle">
    <div style="height: 400px;"></div>
  </div>

  <div class="left">
    <div style="height: 600px;"></div>
  </div>

  <div class="right">
    <div style="height: 200px;"></div>
  </div>

  <div class="bottom"></div>
</div>

* {
  box-sizing: border-box;
}


.container {
  max-width: 90%;
  margin: auto;
  overflow: hidden;
}

.middle {
  width: 48.59114%;
  float: left;
  margin-left: 25.70443%; // push toward the middle
  margin-right: 2.81771%;
  background: #000;

}

.left {
  background: #333;
  margin-left: -77.11328%; // pull towards the left
  width: 22.88672%;
  float: left;
}

.right {
  background: #666;
  width: 22.88672%;
  float: right;
  height: 200px;
  margin-bottom: -9999px; // equal height column trick
  padding-bottom: 9999px;
}

.bottom {
  background: #999;
  width: 77.11328%; // width of the last two columns combined
  float: right;
  height: 200px;
}

不幸的是，我无法在 IE9 中正常工作。在该浏览器中，底部的 2 列跨度低于第一列的底部，而不是在它旁边。似乎问题在于源排序。如果我更改 HTML 中的顺序以匹配视觉布局，则 IE 会运行。就像 IE 在向左移动之前记住第一列的高度，并根据该高度布置底部跨度。

我会移动 HTML 并解决问题，但它正在通过严格的可访问性/屏幕阅读器审查，我知道我会因为没有将主要内容放在源代码顶部而受到批评。

此外，这些 div 中的内容在生产中是动态的，所以我不能依赖于知道任何一列的高度。

任何帮助将不胜感激。

Answer 1

为什么不偏离负边距并将整个事情分解成这样的包装器：

HTML：

<div class="container">
    <div class="container-main">
        <div class="top">
            <div></div>
            <div></div>
        </div>
        <div class="bottom"></div>
    </div>
    <div class="container-left">
        <div class="left"></div>
    </div>
</div>

CSS：

* {
    box-sizing: border-box;
}
.container {
    position: relative;
    width: 90%;
    margin: auto;
    overflow: hidden;
}
.container-main {
    position: relative;
    float: right;
    width: 77%;
    margin: 0;
    min-height: 100%;
}
.container-left {
    position: relative;
    float: left;
    width: 23%;
    margin: 0;
    min-height: 100%;
}
.container-main .top {
    width: 100%;
    min-height: 400px;
}
.container-main .top > div:first-child {
    width: 70%;
    float: left;
    background: #000;
    height: 400px;
}
.container-main .top > div:last-child {
    background: #666;
    width: 30%;
    float: right;
    height: 400px;
}
.container-main .bottom {
    background: #999;
    width: 100%;
    height: 200px;
}
.container-left .left {
    background: #333;
    width: 100%;
    height: 600px;
}

您的主要内容仍位于顶部。如果您不必将所有内容都放在一个包装器中，那么这可能会起作用，但我无法在较旧的 IE 版本中对其进行测试，但您可以试一试并告诉我！

这是上面的一个小提琴：http://jsfiddle.net/egxfnjzL/

...只是为了好玩，这里是您所拥有的内容的精确副本：http://jsfiddle.net/whkqnnyg/