奇怪的CSS（关于利润率，我相信）

Question

我有关于内联无序列表IE中一个奇怪的渲染问题。我想要做的就是一个可视化的项目的寿命，但每当我尝试在任何文本添加在我用来固定时间段<p>对象，它向下移动整个<li>元素，但只在IE浏览器。

请采取甘德这个问题：https://jsfiddle.net/xny1zv3j/

我没事的名称和位置（例如：“约翰”和“项目负责人”被拉低 - 这不是我的问题。但在IE浏览器和IE而已，它好像整个列表元素被拉低。当<p>元素是空的，它只是被忽略，并且是精在所有的浏览器，但是当它有内容，IE怪胎。

Answer 1

你应该能够简单地添加vertical-align: top您.li类。

Answer 2

这是您拍摄的场景吗？https://jsfiddle.net/xny1zv3j/3/

HTML

<div class="container body-content"> 
<div class="container" id="main-container"> 
     <ul class="timeline"> 
      <li class="li" > 
       <div class="timestamp"> 
        <div class="author">John</div> 
        <div class="date">Project Lead</div> 
       </div> 
       <div class="status"> 
        <div class="time-period"> 
         <p></p> 
        </div> 
        <h4>Created Project</h4> 
       </div> 
      </li> 
      <li class="li" > 
       <div class="timestamp"> 
        <div class="author">Jenny</div> 
        <div class="date">Programmer</div> 
       </div> 
       <div class="status"> 
        <div class="time-period"> 
         <p></p> 
        </div> 
        <h4>Built Project</h4> 
       </div> 
      </li> 
      <li class="li" > 
       <div class="timestamp"> 
        <div class="author">Jeremy</div> 
        <div class="date">Marketing</div> 
       </div> 
       <div class="status"> 
        <div class="time-period"> 
         <p>2 yrs</p> 
        </div> 
        <h4>Advertised Project</h4> 
       </div> 
      </li> 
      <li class="li" > 
       <div class="timestamp"> 
        <div class="author">Jack</div> 
        <div class="date">Sales</div> 
       </div> 
       <div class="status"> 
        <div class="time-period"> 
         <p></p> 
        </div> 
        <h4>Sold Project</h4> 
       </div> 
      </li> 
      <li class="li" > 
       <div class="timestamp"> 
        <div class="author">Jebeddiah</div> 
        <div class="date">IT</div> 
       </div> 
       <div class="status"> 
        <div class="time-period"> 
         <p></p> 
        </div> 
        <h4>Defended Project</h4> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

.timeline { 
    text-align: left; 
    list-style-type: none; 
    display: inline-block; 
    margin-bottom:-23px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.li { 
    width: 150px; 
    display: inline-block; 
    } 

.timestamp { 
    margin-bottom: 20px; 
    padding: 0px; 
    font-weight: 100; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.status { 
    padding-top: 10px; 
    position: relative; 
    transition: all 200ms ease-in; 
    white-space: normal; 

} 
    .status h4 { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word; 
    padding-bottom: 3px; 
    } 
    .time-period { 
    display: inline; 
    text-align: center; } 

    .time-period p { 
     /* margin: -30px 0px 20px;*/ 
    } 

    .time-period p:empty { 
     display:inline-block; 
    }