我在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)。
谁能给我解释一下为什么浏览器/操作系统之间会有这种差异(以及如何避免它们)?
更新
在Mac下,在Chrome中垂直对齐标签的方法如下所示:
input[type=checkbox] {
position: relative;
top: 1px;
}
现在需要实现操作系统和浏览器特定的条件...
发布于 2011-01-22 16:38:00
不知道为什么浏览器会做不同的事情,他们总是这样做。到目前为止,你有没有尝试过display:table-cell;
发布于 2011-04-27 16:57:19
另一种解决方案:
.checkbox{
vertical-align:-3px;
}
注意:这很简单。但是,如果标签的字体太大,并不总是工作得很好。
发布于 2011-01-24 06:12:04
也许<input>
上的默认页边距/填充把事情搞乱了?
https://stackoverflow.com/questions/4766387
复制相似问题