代码如下:
<!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>
截图如下:
这已经在 IE8 上测试过，它出现在 IE7 模式下，以及 IE8 模式和 IE7 标准模式下。这不会出现在具有 IE8 标准的 IE8 模式中。其他浏览器(至少 Opera 和 FF)不会显示这种行为。
底部空隙是从哪里来的，为什么加了多少height: 20px和max-height: 20px都改不掉？
最佳答案
我必须承认，我自己也在为这种事情而苦苦挣扎，但我认为这里可能发生的情况是，图像正与其容器 (td) 中出现的任何文本的基线对齐。因此，浏览器会为“y”等字符的下半部分留出空间。
您可以尝试使用 vertical-align: bottom 或设置 td 的 line-height 将 img 对齐到 td 的底部。
关于html - Internet Explorer 7 为我的输入 type=image 添加了一个 3 像素的底部间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4112582/