Question

这是my previous question的后续内容。它处理了Firefox中的渲染问题。在该问题得到修复后，我显然在其他浏览器中测试了该设计。显然 - 它有什么不同 - 我遇到了另一个渲染问题，这次是在IE7中。

Image in Button rendering issue in Internet Explorer 7 http://b.imagehost.org/0451/NastySpace2.png

上述元素的前者是包含button的{{1}}。后者是img，其中包含div。

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

CSS：

button

请帮助我，我开始觉得自己很生气。这是我遇到此* { 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; }标记的第三个padding错误...

编辑：我在这个问题上给予赏金，要么针对IE7问题获得更多根本修复，要么针对与button相关的其他浏览器错误进行提示秒。我希望有一个看起来很完美的按钮，所有主流浏览器的像素都相同。（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}

享受一致的button s！

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提交显示图像来解决问题。

的hackish？也许。但对于我为一家国际银行所做的100多个主要信用卡网站而言，这是一个可以接受的解决方案......到目前为止，我还没有找到一个更挑剔的客户。

Answer 5

我通过使用<input type="image" />代替<button />来解决此问题，并使用javascript修改触发mousedown和mouseup事件时显示的图像。

尝试一下，它会让你头疼。

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

5 个答案: