Question

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

the black border should not exist

所有其他浏览器（chrome，safari和所有IE）都没有遇到类似的效果。

任何关于我如何（保持height属性）的想法都会让Firefox表现出来？

<!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>

Answer 1

我在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属性，但这个解决方案对我有用而不会破坏我的布局。

希望有所帮助！这是我第一次在找到自己问题的无数答案后，在这里回答问题。：）

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

1 个答案: