Internet explorer 7在“我的输入类型=图像”中添加3像素的底部间隙

您应该尝试删除空白,如下所示:

        <table cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
                <td>
                    <input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/><!--
                --></td><!--
            --></tr><!--
        --></table>

我知道很难看。

我必须承认,我自己也在为这类事情而挣扎,但我认为这里可能发生的事情是,图像正与它的容器(td)中出现的任何文本的基线对齐。因此,浏览器为“y”这样的字符的后代部分留出了空间。

vertical-align: bottom 或设置 line-height td的。

酒神是正确的关于“4像素边缘”的行为,这是由显示图像作为内联。但是Internet Explorer不一定会将它们识别为图像,因此会在任何图像的底部添加4像素的边距。

将“display:block;”的内联样式添加到表中的每个图像。这将阻止Internet Explorer像内联元素时那样添加4个像素的空白。

我在InternetExplorer7、8和9中对此进行了测试。当前版本的Firefox、Chrome、Safari和Opera都能很好地处理这种风格。

@维尔克斯- 您是否尝试过实现条件标记以仅覆盖IE7的css行为?

例如:

<!--[if IE 7]>
<style type="text/css">
        form {margin:0px;}
        input {margin:0px;}
</style>
<![endif]-->

但我真正想建议的是,您可以尝试在页面上使用类似这样的CSS重置: http://meyerweb.com/eric/tools/css/reset/

例子:

<tr>                     
<td>                         
<input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/>                     
</td>                 
</tr>

新的无空格:

<tr><td><input type="image" style="width: 20px; height: 20px" src="myimg_20x20.png" alt="20x20px"/></td></tr>

我认为这被称为“IE4像素边距”错误,是由display:inline块引起的;最好的解决方案是为IE8及其以下添加一个边距底部:-4px\9属性。