铬在怪癖和标准模式下垂直对齐

以下图像是使用同一浏览器（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

铬在怪癖和标准模式下垂直对齐

回答

相关问题