Firefox 5 样式复选框奇怪的背景
下面的代码重现了我今天遇到的一个非常奇怪的行为（仅发生在 Windows 上）。鼠标悬停时，Firefox 会用黑色边框为复选框着色。如图所示。
所有其他浏览器（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>
The code bellow reproduces a behavior I've come across today that's pretty strange (only happens on windows). On hover, Firefox colors the checkbox with a black border. As seen on the image.
All other browsers (chrome, safari and all IE's) don't experience similar effect.
Any idea on how I can (keeping the height attribute) make Firefox behave?
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我在 Windows XP 上的 Firefox 5 中也经历过同样的行为。我能够消除黑色背景的唯一方法是将 CSS
Height值设置为auto，并使用margin-top获取复选框相反，正确对齐。示例：
注意：在此示例中，
#c-box是一个input type="checkbox元素。而不是
使用
我知道您提到过， 您希望保留
height属性，但这个解决方案对我有用，但不会破坏我的布局，希望能有所帮助！ :)
I experienced the same behavior in Firefox 5 on Windows XP. The only way I was able to eliminate the black background by setting the CSS
Heightvalue toauto, and usingmargin-topto get the checkbox aligned properly instead.Example:
Note: In this example,
#c-boxis aninput type="checkboxelement.Instead of
Use
I know you mentioned that you wish to keep the
heightproperty, but this solution worked for me without breaking my layout.Hope that helps! This is my first time actually answering a questions here, after finding countless answers to my own problems. :)