奇怪的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; 
    }