Html 使列的高度与具有嵌套框IE8的一列的高度相同

Html 使列的高度与具有嵌套框IE8的一列的高度相同,html,css,internet-explorer,internet-explorer-8,Html,Css,Internet Explorer,Internet Explorer 8,这是一个稍微更新的问题,以前的问题已经解决了…直到IE8的方式 其目的是有两列,一列简单地填充文本,而另一列包含三个高度相等(33.33%)的彩色框,每个框中包含一个响应图像。这些图像需要放在父框的中心。然后,这三个框加起来与文本列的高度相同。不幸的是,容器的整体大小不能是固定的高度,因为站点是响应性的,文本量可能会改变,所以我需要两列的高度灵活 上一篇文章修复了显示内联的列和框高度问题,但是我忘了提到我也需要它来在IE8中工作。在IE8中,包含彩色框的列似乎不希望达到文本列的100%高度。现

这是一个稍微更新的问题,以前的问题已经解决了…直到IE8的方式

其目的是有两列,一列简单地填充文本,而另一列包含三个高度相等(33.33%)的彩色框,每个框中包含一个响应图像。这些图像需要放在父框的中心。然后,这三个框加起来与文本列的高度相同。不幸的是,容器的整体大小不能是固定的高度,因为站点是响应性的,文本量可能会改变,所以我需要两列的高度灵活

上一篇文章修复了显示内联的列和框高度问题,但是我忘了提到我也需要它来在IE8中工作。在IE8中,包含彩色框的列似乎不希望达到文本列的100%高度。现在,图像也不希望在任何浏览器中对齐中心(垂直和水平)

我把我的尝试放在了代码之外,因为它太混乱了,什么也没有实现。我想如果我向社区展示它的基本情况,也许有人能帮我解决问题?非常感谢所有能帮上忙的人,这个问题快把我逼疯了


这里不赞成转载问题。最好更新原始问题。请记住,您的问题可能没有解决方案,而CSS问题的大多数答案都会在可能的情况下尝试最大限度地利用浏览器支持。抱歉,可能是重复的,但我已经说过,原来的问题已经得到了回答,所以我想如果我只是更新它,它将不会得到回答,因为人们会认为它是错误的关门了@西曼农
<div class="page-wrapper">

  <div class="column-table">

    <div class="column-row">

      <div class="column column-cell column-text">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

      <div class="column column-cell column-boxes">

        <div class="box green-box">
            <img src="http://placehold.it/100x100&text=box+1">
        </div>

        <div class="box red-box">
            <img src="http://placehold.it/100x100&text=box+2">
        </div>

        <div class="box blue-box">
            <img src="http://placehold.it/100x100&text=box+3">
        </div>

      </div>

    </div>

  </div>

</div>
.page-wrapper {
  background-color: #FFFFFF;
}

/* Table */
.column-table {
  display: table;
}

.column-row {
  display: table-row;
}

.column-cell {
  display: inline-block;
}

.column {
  vertical-align: middle;
  height: 100%;
}

.column-text {
  width: 62.5%;
  background-color: #e2e2e2;
}

.column-boxes {
  width: 37.5%;
}

.box {
  min-height: 33.33%;
  width: 100%;
}

.box img {
  max-width: 100%
}

/* Colors */

.green-box {
  background-color: #016354;
}

.red-box {
  background-color: #eb5640;
}

.blue-box {
  background-color: #93ceee;
}