代码之家 › 专栏 › 技术社区 › NikiC

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

space image internet-explorer-7 button html

NikiC · 技术社区 · 14 年前

这是对 my previous question . 它处理了火狐中的渲染问题。在解决了这个问题之后,我显然在其他浏览器中测试了设计。很明显-怎么可能不同-我在IE7中遇到了另一个渲染问题。

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

上述元素的前者是 button 包含一个 img . 后者是一个 div 包含一个 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;
}

请帮帮我,老实说,我开始觉得很生气了。这是第三个 padding 我遇到的错误 按钮 标签…

编辑 :我在这个问题上给予奖励,要么得到更多关于IE7问题的根本修复,要么得到关于与 <button> 我想要一个完美的按钮,每个像素在所有主要浏览器中都是一样的。(PS:IE6是不主要浏览器。)

5 回复 | 直到 14 年前

NikiC 14 年前

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

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

meder omuraliev 14 年前

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

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

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

stevelove 14 年前

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

button {    
    overflow: visible;
    width: auto;
}

bpeterson76 14 年前

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

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

Scott 14 年前

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

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