2

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

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

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

在前一种情况下（带有buttonand的情况）在 的边界和 的边界img之间有一个空格。我想摆脱它。imgbutton

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

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

编辑：我在这个问题上给予赏金，要么为 IE7 问题获得更根本的修复，要么为与<button>s 相关的其他浏览器错误提供提示。我想要一个看起来完美的按钮，在所有主要浏览器中像素都相同。（PS：IE6不是主流浏览器。）

4

5 回答 5

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}

与一致的 s 玩得开心button！

于 2010-10-13T15:40:51.477 回答
0

所以display:block不修？vertical-align:bottomimg 怎么样？你能在 jsfiddle.net 上设置一个测试用例吗？

编辑：display:block按钮似乎做到了：http ://work.arounds.org/sandbox/48/run

编辑#2：固执啊..这行得通吗？http://work.arounds.org/sandbox/48

于 2010-10-12T19:32:08.860 回答
0

您是否尝试将 width:auto 添加到按钮？

button {    
    overflow: visible;
    width: auto;
}
于 2010-10-27T21:28:51.373 回答
0

我经常发现自己在诅咒按钮，然后通过显示带有 onclick Javascript 提交的图像来解决问题。

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

于 2010-10-27T21:36:00.503 回答
0

我通过使用 a<input type="image" />而不是 a<button />并使用 javascript 来修改触发 mousedown 和 mouseup 事件时显示的图像来解决这个问题。

试试吧，它会让你头疼不已。

于 2010-10-28T05:54:32.363 回答