CSS 底部在 Internet Explorer 中不起作用

Question

我有一个表示课程的 div，该课程根据学生完成课程的百分比动态“填充”绿色跨度。所以跨度的高度是动态分配的。这在除 Internet Explorer 之外的所有浏览器中都能完美运行，其中跨度不是从 div 的底部开始，而是在中间的一半， 从图片中可以看出，第一节课完成了 100%，第二节课完成了 25%：

Chrome、Firefox、Safari、Opera：

Internet Explorer：

我的 HTML 是：

  <div style="display:table; margin:0 auto;">

       <div class="detail_image">

            <div class="detail_image_cont">
                 <img src="images/thamatho/chapters/img.png" />  
            </div>
            <span style="height:<?php echo $completepercentage."%";?>">     
             </span>
      </div> 
 </div>

我的 CSS 是：

 .detail_image{  
   display: table-cell;
   border: 4px solid #39C;
   width:48px;
   height:48px;
   vertical-align: middle;
   text-align:center;
   -webkit-border-radius: 35px 35px 35px 35px; 
   -moz-border-radius:35px 35px 35px 35px;
   border-radius: 35px 35px 35px 35px;
   position:relative;
   overflow:hidden;
   background-color:transparent;
 }


 .detail_image > span {
    width: 101%;
    overflow: hidden;
    left: -0.4px;
    position: absolute;
    background-color: #CFC; 
    bottom: 0px;
    height: 0%;
    z-index:1;
  }

 .detail_image_cont{ /* to center image in the div */
    display:block;
    width:100%;
    text-align:center;
    margin:0 auto;
    position:relative;
    z-index:999;
  }

Answer 1

将display: block 添加到您的跨度中，它应该会有所帮助。