按钮中的图像：奇怪的空间2.0（这次是IE7）

Question

这是我之前的问题的后续问题。它解决了 Firefox 中的渲染问题。解决该问题后，我显然在其他浏览器中测试了该设计。显然 - 这怎么可能不同 - 我遇到了另一个渲染问题，这次是在 IE7 中。

Internet Explorer 7 中按钮中的图像呈现问题 http://b.imagehost.org/0451/NastySpace2 .png

上述元素中的前一个是一个包含 img 的 button。后者是一个包含 img 的 div。

在前一种情况下（带有 button 和 img 的情况），img 的边框和 img 的边框之间有一个空格>按钮。我想摆脱它。

CSS：

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

/* this is a fix for one of the padding issues in IE7 */
button {
    overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

请帮助我，说实话我开始感到非常生气。这是我使用此 button 标签遇到的第三个 padding 错误...

编辑：我正在针对这个问题给予赏金，以获得一个对 IE7 问题或与 相关的其他浏览器错误的提示进行更多根本修复。我想要一个看起来完美的按钮，在所有主要浏览器中像素都相同。 （PS：IE6不是主流浏览器。）

Answer 1

好吧，看来我必须得出这样的结论：这个问题没有解决办法——至少没有已知的解决办法。因此，我没有其他选择，只能手动删除这个空间（使用负边距）。

以下是我的完整修复列表，这些修复使 button 元素在 Firefox、Safari、Chrome、Opera、Internet Explorer（IE9、IE8、IE7，尚未测试 IE6）中看起来相同：

button img {
    display: block; /* required to get rid of bottom space in many browsers */
    *margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}

button {
    overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
    border: 0;  /* remove inner focus from Firefox. The inner focus takes up */
    padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
    outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}

压缩版本：

button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}

删除换行符：

button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}

享受一致的按钮的乐趣！

Answer 2

那么 display:block 不能解决这个问题吗？ img 的 vertical-align:bottom 怎么样？你能在 jsfiddle.net 上设置一个测试用例吗？

编辑：按钮上的 display:block 似乎可以做到这一点：http:// /work.arounds.org/sandbox/48/run

编辑#2：顽固啊..这有效吗？ http://work.arounds.org/sandbox/48

Answer 3

您是否尝试过向按钮添加 width:auto ？

button {    
    overflow: visible;
    width: auto;
}

Answer 4

我经常发现自己咒骂按钮，然后通过使用 onclick Javascript 提交显示图像来解决问题。

哈克？也许。但对于我为一家国际银行做过的 100 多个主要信用卡网站来说，这是一个可以接受的解决方案……而且迄今为止，我还没有找到比这更挑剔的客户。

Answer 5

我通过使用 而不是 并使用 javascript 修改显示的图像来解决此问题当 mousedown 和 mouseup 事件被触发时。

尝试一下，它会让你省去很多麻烦。