这个问题在这里已有答案:
我在Stack Overflow上讨论了这个问题的帖子,但没有什么对我有用 . 我有以下CSS代码垂直对齐复选框/标签对:
body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
fieldset {
line-height: 100%;
}
label {
display: inline-block;
vertical-align: baseline;
}
完整的HTML代码是here .
复选框/标签对在Mac OS X下的Safari(5.0.3)和Firefox(3.6.13)中正确垂直居中 . 在Chrome(Mac OS X)上,复选框略微呈现在顶部 . 在Windows操作系统上,复选框和关联标签与底部对齐(在不同的浏览器中一致:Firefox,Safari,Chrome和Internet Explorer 8) .
有人可以解释一下为什么浏览器/操作系统之间会出现这种差异(以及如何避免它们)?
Update
在Mac下Chrome中垂直对齐复选框与标签的黑客攻击如下:
input[type=checkbox] {
position: relative;
top: 1px;
}
现在需要实现OS和浏览器特定的条件...
6 回答
不知道为什么浏览器做不同的事情,他们总是这样做 . 就此而言,你试过
display:table-cell;
吗?另一种方案:
注意:很简单 . 但如果标签的字体大小太大,并不总是正常 .
也许
<input>
上的默认边距/填充是搞乱了吗?这就是我最终做到的方式: