Firefox渲染文本低于Chrome

Question

我的代码在chrome（右）上正确渲染，但在Firefox（左）上渲染不正确。有关如何修复它的任何提示？ 刷新（放大/缩小）后它会自行修复，但在第一次渲染时几乎总是错误的。

HTML：

<td>
  <label class="fb" for="11">
    <div class="strokeme"> asdf    8</div>
    <input id="11" type="checkbox" name="fb" value="11">
    <img src="http://placehold.it/100/780000&amp;text=%20">
  </label>
</td>

CSS：

.fb > input[type=checkbox]{
  display:none;
}
input[type=checkbox] + img{
  cursor:pointer;
  border:5px solid transparent;
  opacity:.1;
}
input[type=checkbox]:checked + img{
  border:5px solid #00f000;
  opacity:1;
}
.fb {
     position:relative;
}
.fb div {
    position:absolute;
    margin:4px;
    text-align: center;
    font-weight:bold;
}
.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;

}

Answer 1

具有不同默认设置（字体，正文填充等）的浏览器是Web设计人员的已知问题。 Normalize.css应该为所有人提供平等的信息。

Answer 2

将其添加到.fb标签

的样式中

.fb{
// existing style ...
    display:block;
}