CSS和浮点问题我认为...表单元素错误对齐

Question

我使用CSS设置了我的表单。标签浮动到左侧，输入/ textareas浮动到右侧。它们很好地对齐。

但是我最近添加了一个带有复选框元素的块。出于某种原因，在它上面出现了一个边缘，我无法找到解决方案。我怀疑这是一个浮动问题，但我无法弄明白。我对CSS一般都很好。

（不再可见）

注意复选框块上方的额外空格...边框可以帮助您了解div的位置。

那么违规的CSS代码在哪里？

谢谢！

更新

在Safari中看起来很好。

我在mac osx上测试firefox 3。

Answer 1

这是因为您使用带有图例的字段集。传说正在推动顶部边缘。传说很难跨浏览器，实际上大多数浏览器除了字体颜色外都不能设置它们的样式。

点击此链接，查看针对样式图例元素进行的一些研究（使用跨浏览器屏幕截图）：legend styling

我建议您隐藏图例，并在字段集中包含一个额外的标签，以实现跨浏览器的优点。

Answer 2

我认为这是：

.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}

Firebug告诉我你的边界重叠了。将该盒子的宽度减少到8％会有效，但不确定能达到你想要的效果吗？

Answer 3

如果我没有弄错，选项行类中的复选框和标签都被定义为块级元素。尝试删除显示属性或将其设置为内联。