Question

有人知道为什么按钮背景图像周围有一个边距（大约1px），仅在Internet Explorer中？

在IE与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

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

感谢。

Answer 1

Differnet浏览器对按钮标记（和其他标记）有不同的定义。事实上，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 */
}

<强>更新

我认为不同的是字体系列（或它的渲染），请尝试：

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模式运行。您在测试时是否包含doctype？

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

Answer 2

我的代码没有遇到这样的问题，可能这是因为你的版本较旧。

Answer 3

不同的浏览器对不同的html元素有不同的通用样式标准。为了避免这个问题（或者你可以尽力防御它！）你应该在你的所有网站中都包含一个重置样式表，以尽量同步所有浏览器的样式。我发现的其中一个伟大的是Erics Archived的想法：

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

这通常可以解决问题（在倒数第二次浏览器测试后进行一些小调整）。

IE中按钮的背景图像边距

3 个答案: