HTML - 对齐单选按钮和文本

Question

假设您有两个彼此相邻的简单表格单元格。
一个包含单选按钮和文本。另一个只包含文本。

单选按钮的大小设置为 16x16 像素(不要问我为什么，假设就是这样)。
字体大小为 12 像素。

如何使标签和单选按钮在所有主要浏览器中沿着(或相当靠近)表格行的垂直中间一致排列？

让您入门的示例 HTML:

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

在我安装的 IE、Opera、Firefox 和 Chrome 版本中，上面的呈现类似于 this

我期望看到的结果是显示在该图像上的结果... ...IE？认真的吗？

其余部分看起来足够接近，但我为排列文本所做的任何尝试都使它在 4 种浏览器中至少有 2 种浏览器中看起来总是很糟糕。

Answer 1

谷歌搜索“vertical-align:middle”发现this short explanation由 Gavin Kistner 撰写，这很有用。我尝试了该页面上的最终建议，它似乎在 Chrome、IE、Firefox、Opera 和 Safari 中呈现得很好。

我所做的是添加 td{ line-height:1.5em } - 请参阅链接以获取解释。