IE8 不显示带有浮点数的 div

Question

我创建了一个文章查看页面，它适用于除 IE8 之外的所有浏览器-...如果这不是专门针对使用机器的 IE，那也没关系...最糟糕的是我实际上曾经有过这个工作，但是当我在桌子下面摆弄一些电缆时，我有点失去了所有的工作，我真的应该保存

下面是我希望它在所有浏览器中看起来像的方式（到目前为止，除了 IE 之外，它只看起来像这样）

这是它在 IE 上的样子...

这是当前的 CSS，我没有看到任何让我想到的东西

div.GalleryColumn {display: inline; height: 320px; width: 95%; overflow: auto; display: inline;}

div.GalleryColumn.ColumnContent {width: 65%; max-height: 320px; margin-top: 25px; }
div.GalleryColumn.ColumnContent:nth-child(odd) {float: right;}
div.GalleryColumn.ColumnContent:nth-child(even) {float: left;  text-align: right;}

div.GalleryColumn.ColumnImage {width: 25%; height: 320px; margin-top: 25px;}
div.GalleryColumn.ColumnImage:nth-child(odd) {
    float: left;
    margin-left: 50px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
}
div.GalleryColumn.ColumnImage:nth-child(even) {
    float: right;
    margin-right: 50px;
    -webkit-box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.5);
    box-shadow: -10px 10px 5px 0px rgba(0,0,0,0.56);
}

我不知道这是否有任何帮助，我只是感到困惑，因为我曾经让它工作过，但现在我完全忘记了如何修复它

Answer 1

似乎 IE8 不支持 nth-child 伪 class，所以这可能是您的问题。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

是否可以将 .left 和 .right class 添加到各个元素？

Answer 2

div.GalleryColumn.ColumnContent {float: left; width: 65%; max-height: 320px; margin-top: 25px; }

div.GalleryColumn.ColumnImage {float: right; width: 25%; height: 320px; margin-top: 25px;}

我上次就是这样！由于 IE8 不支持 :nth-child() [感谢@Turi 的提醒] 我只是默认在一侧显示文本，在另一侧显示图像。如果他们使用 IE8，他们可能不想看到 "fun" 交替 text/image 无论如何...

所以现在 IE8 看起来像这样，而其他的仍然交替

IE8 不显示带有浮点数的 div

IE8 Not showing divs with floats

html

css

internet-explorer-8