鉻在怪癖和標準模式下垂直對齊

以下圖像是使用同一瀏覽器（Chrome 25）對同一頁進行的渲染。唯一的區別是一個頁面具有一個DOCTYPE（因此在執行標準模式）和一個沒有（因此怪癖）鉻在怪癖和標準模式下垂直對齊

怪癖：

標準：

兩種細胞具有vertical-align: middle，兩張圖片都是display: inline-block。
垂直對齊工作怪癖，但不是在標準，爲什麼？

HTML

<table class="oppres" id="oppscore4"> 
    <tbody> 
     <tr id="oppscore4-main"> 
      <td><img src="images/gold.png"></td> 
      <td></td> 
      <td>0</td> 
     </tr> 
     <tr></tr> 
     <tr id="oppscore4-total"> 
      <td></td> 
      <td>=</td> 
      <td>0</td> 
     </tr> 
    </tbody> 
</table>

CSS

table.oppres{ 
    height: 120px; 
} 

table[id^=oppscore]{ 
    width: 80px; 
    font-size: 17px; 
    line-height: 1; 
} 
table[id^=oppscore] tr{height: 1em;} 
table[id^=oppscore] img{height: 0.9em;} 
table[id^=oppscore] tr:nth-last-child(2){height: auto;} 
table[id^=oppscore] td:first-child{text-align: right;}

足夠多的代碼來重現問題更多。

來源

2013-02-27 TwiNight

請張貼您的代碼 – 2013-02-27 06:10:53

與標準相比，怪癖中的圖片看起來有點像裁剪。標準正確地表明瞭它的可能性，而且怪癖不是（怪癖的本質）。沒有代碼就很難推測這個問題。 – fredsbend 2013-02-27 08:04:31

添加了一些代碼 – TwiNight 2013-02-27 08:58:17

的問題不在於vertical-align上<td>但<img />

怪癖模式觸發行爲解釋here：

的圖像的垂直對齊是在一定條件下，以封閉盒的底部，而不是文字的基線。當圖像是元素中的唯一內容（通常是表格單元格）時會發生這種情況。這意味着例如表格單元格中的圖像默認處於怪癖模式下單元格的底部（這通常是作者想要的），而在標準模式下，圖像下方有幾個像素間距（除非一個像素設置爲垂直對齊：底部爲img元素）。

你在圖像下面標準模式看到的空間實際上是<td>的盒子基線和底部（參見http://www.w3.org/TR/CSS2/visudet.html#leading）之間的空間。

vertical-alignbottom<img />其底部與<td>的底部對齊，所以沒有空間了。

來源

2013-02-27 10:56:50 MatTheCat

我希望圖像中間對齊（垂直），並且圖像上的「vertical-align：middle」不起作用。 – TwiNight 2013-02-27 11:29:17

http://jsfiddle.net/bsGuY/這是不是中間對齊？ – MatTheCat 2013-02-27 11:55:41

http://jsfiddle.net/bsGuY/1/否 – TwiNight 2013-02-27 12:11:24

鉻在怪癖和標準模式下垂直對齊

回答

相關問題