垂直对齐图像跨浏览器 - Firefox bug

Question

这很难解释，请参阅小提琴here。适用于Chrome，不适用于Firefox。

我需要在一个固定大小的容器内显示多个图像，并将它们垂直对齐到中间。我遵循了这个问题中给出的例子（How to vertically align an image inside div），这很好用。但在我的标记中使用它并不适用于Firefox。

根据图像的背景下，HTML标记可能会稍有不同：

例如：

工作：

<div class="print-wrap"> 
    <ul> 
     <li class="img"> 
      <span class="img-valign-helper"></span> 
      <img class="ls img-valign" src="http://placehold.it/200x105"> 
     </li> 
    </ul> 
</div> 

不工作：

<div class="print-wrap has-size"> 
     <ul> 
      <li class="img"> 
       <div class="table"> 
        <div class="table-cell-50 img-wrap"> 
         <span class="img-valign-helper"></span> 
         <img class="ls img-valign" src="http://placehold.it/200x105"> 
        </div> 
        <div class="table-cell-50 info-wrap">content</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

在Firebug中看到这个，我可以看到<span class="img-valign-helper"></span>略显灰色 - 我不确定这是什么意思？

结果是图像被垂直地对准到顶部。所以img-valign-helper不起作用。但在Chrome中运行良好。我在我的html标记中没有看到会导致此问题的任何内容。 css也几乎相同。

这里怎么回事？

Answer 1

您需要将height: 100%;添加到.table-cell-50。这样它可以穿过高度到你的助手跨度。

Updated fidddle