Firefox 5造型复选框奇怪的背景

问题描述：

代码波纹管重现了我今天遇到的行为，这很奇怪（只发生在Windows）。在悬停时，Firefox以黑色边框为checkbox着色。如图所示。Firefox 5造型复选框奇怪的背景

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>

我不能在firefox 5.0的复选框中重现任何异常。也许截图？ – natedavisolds

@natedavisolds更新了一个图像，提示。 – Frankie

我无法重现（FF 5.0，OSX）。 –

答

我在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造型复选框奇怪的背景

相关推荐