Html 为什么要在那些div'；不是放在彼此下面吗？

我有一段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>

在所有浏览器上都是这样的：

但在IE上，它看起来是这样的：

我说的是上一个和下一个按钮。在IE上，它们在盒子的顶部，但应该在底部

我一整天都在努力完成这件事

---

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

尝试添加

清除：两个

到

。照片内容的属性。
尝试添加
清除：两者都有
到
.photo content
的属性。
尝试从
中删除
清除：两个
。上一个下一个div{}
@Adam没有任何内容changed@Adam我正在使用IE11@kuba12我发现了你的问题。你正在使用IE:）@Jeff.Clark-hahh问题是不仅仅是我；）尝试从
.prev next div{}
@Adam中删除
清除：两个
changed@Adam我正在使用IE11@kuba12我发现了你的问题。你正在使用IE:）@Jeff.Clark-hahh问题是不仅仅是我；）你的问题是IE没有计算照片容器的高度。您可以指定一个固定高度，也可以使用
float:left，但在这种情况下，您将丢失自动左/右边距；到。照片内容有任何变化/你的问题是IE没有计算照片容器的高度。您可以指定一个固定高度，也可以使用
float:left，但在这种情况下，您将丢失自动左/右边距；到。照片内容有任何变化/
.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;
}