下面的代码重现了我今天遇到的一个非常奇怪的行为(只发生在 Windows 上)。悬停时，Firefox 会用黑色边框为 checkbox 着色。如图所示。
所有其他浏览器(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>
最佳答案
我在 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 属性，但这个解决方案对我很有效，而且不会破坏我的布局。
希望对您有所帮助!在为自己的问题找到无数答案之后，这是我第一次真正在这里回答问题。 :)
关于css - Firefox 5 样式复选框奇怪的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6511610/