壁虎與WebKit的：直列塊

Question

內填充下面是顯示我的問題小提琴：http://jsfiddle.net/7QaXL/1/

在基於WebKit的瀏覽器的<p> S的填充似乎推圖像起來，這是不是我想要的。

所以我的問題是：

• 什麼是（根據規格）正確的行爲？
• 我怎樣才能獲得六個相同高度的塊，內部填充的元素，而不改變他們的路線？

Answer 1

首先，我無法複製您的問題。其次，我會嘗試使用這樣的：

<ul> 
    <li> 
     <figure> 
      <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt=""> 
      <figcaption> 
       <h6>Title 1</h6> 
       <p>Long description 1</p> 
      </figcaption> 
     </figure> 
    </li> 
    <li> 
     <figure> 
      <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt=""> 
      <figcaption> 
       <h6>Title 2</h6> 
       <p>Long description 2</p> 
      </figcaption> 
     </figure> 
    </li> 
    <li> 
     <figure> 
      <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt=""> 
      <figcaption> 
       <h6>Title 3</h6> 
       <p>Long description 3</p> 
      </figcaption> 
     </figure> 
    </li> 
</ul>

這使得更多的意義在語義上和現在一樣的細節依賴於相關的圖像，這將標記讓你有過造型更大的控制權。 figure和figcaption是HTML5元素，如果您需要任何進一步幫助，請讓我知道！

編輯：在進一步探討這個問題後，我發現你遇到的問題（據我所知）與display: inline-block;及其自然行爲有關。如果用float: left;替換該屬性並給出無序列表overflow: hidden;（或使用clearfix技術），則應解決該問題。