Question

我有这段HTML：

<div class="lightbox" id="filename1.jpg">
    <div class="box">
        <div class="close-div"><a class="close" href="#">X</a></div>
        <div class="photo-content">
            <img src="../photos/filename1.jpg">
            <div class="desc">Some description.....</div>
        </div>
        <div class="prev-next-div">
            <a class="prev" href="#filename10.jpg">Previous</a>
            <a class="next" href="#filename2.jpg">Next</a>
        </div>
        <div class="clear"></div>
    </div>
</div>

和这篇CSS：

.lightbox {
    opacity: 0;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    color: #333333;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    text-align: center;
}

.lightbox:target {
    opacity: 1;
    outline: none;
    top: 0;
}

.lightbox .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: -ms-inline-grid;
    -ms-grid-columns: min-content;
    /*min-width:500px;*/
    margin: 2% auto;
    padding:10px 20px 20px 20px;
    background-color:#FFF;
    -webkit-box-shadow: 0px 0px 0px 1400px rgba(40,33,101,0.67);
    -moz-box-shadow: 0px 0px 0px 1400px rgba(40,33,101,0.67);
    box-shadow: 0px 0px 0px 1400px rgba(40,33,101,0.67);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.lightbox .box > p:nth-child(2) 
{
    -ms-grid-row:2;
    display:inline-block;
}

.lightbox .title {
    margin: 0;
    padding: 0 0 10px 0px;
    border-bottom: 1px #ccc solid;
    font-size: 22px;
}

.lightbox .photo-content {
    display: block;
    position: relative;
    text-align: center;
    margin: 5% auto 0;
}


.lightbox .close {
    display: block;
    float: right;
    text-decoration: none;
    font-size: 22px;
    color:#858585;
}

.clear {
    display: block;
    clear: both;
}

.lightbox .photo-content .desc {
   z-index:99;
   bottom:0;
   position:absolute;
   padding: 10px 0px 10px 0px;
   margin:0 0 8px 0;
   background:rgba(0,0,0,0.8);

   color:#fff;
   font-size:17px;
   opacity:0;
   transition: opacity ease-in-out 0.5s;    
}   

.lightbox .photo-content:hover .desc   {
   opacity:1;
}

.lightbox .next,
.lightbox .prev,
.lightbox .close {
   display:block;
   text-decoration:none;
   font-size:22px;
   color:#858585;
}

.prev {
   float:left;
}

.next,
.close {
   float:right;
   text-align: right;
}

.close-div {
    clear: both;
    float: left;
}
.prev-next-div {
    clear: both;
    /*float: left;*/
    position: relative;
    /*margin: 99% 0 0 0;*/
}

.clear {
   display:block;
   clear:both;
}

并且在所有浏览器上看起来像这样：

但在IE上它看起来像这样：

我正在谈论那些上一页和下一页按钮。在IE上，它们位于盒子的顶部，但它们应位于底部。

我试图整天完成这件事。

任何帮助将不胜感激。谢谢！

Answer 1

尝试将clear: both;添加到.photo-content的属性中。

为什么在IE上这些div不会被置于彼此之下？

1 个答案: