IE 中按钮的背景图像边距

发布于 2024-12-11 07:26:38 字数 799 浏览 0 评论 0 原文

有人知道为什么按钮背景图像周围有一个边距（大约 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（大尺寸）中在我的计算机上的显示方式：

带背景的按钮-IE 中的图像边距

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

谢谢。

原文

Does someone know why there is a margin (about 1px) around the button background-image, only in Internet Explorer ?

Try this code in 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>

Here is how it is displayed on my computer in IE9 (in big size) :

button with background-image margin in IE

Notice : If I remove the (black) border, the margin disappears.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老街孤人 2024-12-18 07:26:38

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

更新：
没有我可以重现该问题。在这种情况下，IE 正在 Quirks 模式下运行。测试时是否包含文档类型？

无论如何，你只需要避免怪异模式：http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode< /a>
例如，在文档类型之前避免任何内容。

Differnet browsers have different definitions of the button tag (and other tags). In fact, Chrome have a margin of 2px. You can easily solved it by making margin explicit:

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 */
}

Update:

I think it is the font-family (or the rendering of it) which is different, try:

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;
}

Update:
Without <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I can reproduce the problem. And in this case IE is running in Quirks mode. Do you include the doctype when you test it?

Anyway, you just have to avoid quirks mode: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode
Ex avoid ANYTHING before doctype.

回复收藏 0 原文