IE8没有显示带浮点数的div

时间:2016-09-09 16:48:29

标签: html css internet-explorer-8

我已经创建了一篇文章查看页面,该文章适用于除IE8 -...之外的所有浏览器。如果这不是专门针对使用机器的IE浏览器,那就没关系......最糟糕的是我实际上有这个在某一点上工作,但是当我在办公桌下面乱搞一些电缆时,我丢失了所有的工作,我真的应该已经保存了

以下是我希望它在所有浏览器中看起来的样子(到目前为止除了IE之外它只是看起来像这样) Working image

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

Not working

这是当前的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);
}

我不知道是否有任何帮助,我只是感到困惑,因为我曾经让它工作过一段时间,但现在我已经忘记了如何修复它

2 个答案:

答案 0 :(得分:1)

似乎IE8不支持nth-child伪类,所以这可能是你的问题。

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

将.left和.right类添加到各个元素是否可行?

答案 1 :(得分:0)

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,他们可能不想看到"有趣的"无论如何交替文本/图像...

所以现在IE8看起来像这样,而其他人仍然是

enter image description here