css - Firefox 5样式复选框奇怪的背景

下面的代码重现了我今天遇到的一种非常奇怪的行为（仅在Windows上发生）。悬停时，Firefox用黑色边框为checkbox上色。如图所示。

所有其他浏览器（chrome，safari和所有IE）都不会产生类似的效果。

关于如何使Firefox保持行为的任何想法（保持height属性）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #c-box {
            height: 20px;
        }

    </style>
</head>
<body>
        <input id="c-box" type="checkbox">
        <label for="c-box">this is a checkbox</label>
</body>
</html>

最佳答案

我在Windows XP的Firefox 5中遇到了相同的行为。我能够通过将CSS Height值设置为auto并使用margin-top来使复选框正确对齐来消除黑色背景的唯一方法。

例：

注意：在此示例中，#c-box是input type="checkbox元素。

代替

#c-box {
    height: 20px;
}

采用

#c-box {
    margin-top: 5px; /* Test to see which margin value matches the look you desire */
    height: auto;
}

我知道您提到您希望保留height属性，但是此解决方案对我有效，而且不会破坏我的布局。

希望有帮助！在找到我自己问题的无数答案之后，这是我第一次真正在这里回答问题。 :)