Checkbox在Firefox中呈现得很好，但在Chrome中却没有

Question

有人可以告诉我为什么在this example中复选框及其旁边的文字在Chrome中呈现的方式与在Firefox中的呈现方式不同（所需的结果）？

Firefox 16.0.2
Chromium 18.0.1025.168 (Developer Build 134367) (WebKit 535.19)

Answer 1

1. 将<br>放在与第一个复选框输入元素相同的行的末尾，而不是放在下一行。这将水平对齐复选框。 另见：text-align: right has margin or buffer in Chrome
2. 将该表单中两个输入元素的宽度调整为1em。 Chrome似乎会自动将这些宽度扩展到容器中的可用空间，而Firefox则没有。

虽然这还不是一个完整的解决方案，但垂直定位仍然存在差异。

Demo