Internet Explorer 7为我的输入type = image添加了一个3像素的底部间隙

Question

Internet Explorer 7为我的输入type = image添加了一个3像素的底部间隙

Vil*_*lx- 2 html css internet-explorer-7

这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>Demo page</title>
        <style type="text/css">
            input
            {
                border: 1px solid blue;
                padding: 0px;
                margin: 0px;
                display: inline-block;
            }
            td
            {
                border: 1px solid red;
                padding: 0px;
                margin: 0px;
                height: 20px;
                max-height: 20px;
            }
        </style>
    </head>
    <body>
        <form method="get" action="">
            <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>
        </form>
    </body>
 </html>

Run Code Online (Sandbox Code Playgroud)

这是截图:

IE7 3px底部bug

这已经在IE8上进行了测试,它既可以在IE7模式下使用,也可以在IE8模式下使用IE7标准模式.这不会出现在IE8模式下的IE8标准.其他浏览器(至少是Opera和FF)不会显示这种行为.

来自哪儿呢底部差距,为什么我不能摆脱它不管有多少height: 20px和max-height: 20px我补充？

Answer 1

Ste*_*eve 5

我必须承认,我自己也在努力解决这类问题,但我认为这里可能发生的事情是图像与其容器中出现的任何文本的基线(td)一致.因此,浏览器为"y"等字符的下行部分留出空间.

您可以尝试使用vertical-align: bottom或设置td将img与td的底部对齐line-height.

归档时间：	14 年，11 月前
查看次数：	2477 次
最近记录：	12 年，9 月前