按钮中的图像:奇怪的空间2.0(这次是IE7)

好吧,看来我必须得出结论,这是没有解决办法的-至少没有已知的解决办法。因此,我看到没有其他选择,然后手动删除这个空间(使用负空白)。

这是我的完整修复列表 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!

所以 display:block 没修好吗?怎么样 vertical-align:bottom 对于IMG?你能在jsfiddle.net上设置一个测试用例吗?

编辑: 显示:块 在按钮上似乎可以做到: http://work.arounds.org/sandbox/48/run

编辑第2页 :顽固啊……这行吗? http://work.arounds.org/sandbox/48

你试过在按钮上增加宽度:自动吗?

button {    
    overflow: visible;
    width: auto;
}

我经常发现自己在诅咒按钮,然后用onclick javascript submit显示图像来解决问题。

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

我通过使用 <input type="image" /> 而不是 <button /> 并使用javascript修改当mousedown和mouseup事件触发时显示的图像。

试试看,它会让你省去一个大头痛。