IE中的按钮上的背景图像边距

有人知道为什么只有在Internet Explorer中按钮背景图像周围有一个边距（大约1像素）？IE中的按钮上的背景图像边距

尝试在IE浏览器的代码VS Firefox中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>test</title> 
    <style type='text/css'> 
     button { 
      background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x; 
      border: 1px solid black; 
      font-size: 24px; 
     } 
    </style> 
</head> 
<body> 
    <button>LOL</button> 
</body> 
</html>

下面是它是如何显示我在IE9的电脑上（在大尺寸）：

button with background-image margin in IE

注意：如果我删除（黑色）边框，边距消失。

谢谢。

来源

2011-10-21 Yoot

不同浏览器对按钮标签（和其他标签）有不同的定义。事实上，Chrome的边距为2px。您可以轻松地解决它通过使利润率明确：

button { 
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x; 
    border: 1px solid black; 
    font-size: 24px; 
    margin: 0; /* or ex 1px */ 
}

更新：

我认为这是FONT-FAMILY（或它的渲染），这是不同的，请尝试：

button { 
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x; 
    border: 1px solid black; 
    font-size: 24px; 

    /* To get it exact */ 
    margin: 0; /* or ex 1px */ 
    padding: 0; /* or ex 1px */ 

    font-family: Consolas; 
}

更新： 没有<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">我可以重现该问题。在这种情况下，IE以Quirks模式运行。你在测试时是否包含文档类型？

无论如何，你只需要避免怪癖模式：http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode 避免doctype之前的任何事情。

来源

2011-10-21 08:50:25

这不是问题在这里。这不是围绕整个按钮元素的边距（确实可以通过您的答案来确定），而是围绕按钮内的背景图像的边距。明白了吗？ – Yoot

@Yoot啊好吧，我注意到只在IE8中。我会删除这个答案，直到我找到解决方案:) –

试过字体家族，边缘仍然在这里。无论如何要在这个网站上发布图片吗？我可以告诉你它是如何显示在我的电脑上的。 – Yoot