Question

以下代码适用于除IE 7或8以外的所有浏览器。

<img src="images/image1.png" usemap="#map1" width="669" height="300" border="0">    
<map name="map1">    
  <area shape="rect" coords="80,120,182,226" href="XXXXX" target="_top" >    
</map>    
<div style="background : url(images/image2.png) repeat-y; height:auto; width:669px;">    

<?
if ($count==0)
{
?>

table width="550">    
tr>                     
td>    
div >    
center>    
    Sorry there is not information right now to show. <br/>    
Please <a href="" target="_top">click here</a> to go to our home page.<center>     
/div>    
/td>    
/tr>    
/table>    
?
}  
else {}
/div>
img src="images/image3.png" width="669" >

CSS中的

： td { vertical-align: top; }

IE中的问题是，在image1.png之后我可以在中间和下一个图像之间有空白区域，在空白空格后显示image2.png。您可以粘贴此代码并自行检查。我无法弄清楚为什么会发生这种情况？

无论如何我可以检查浏览器是否是IE浏览器，如果是，那么请向上推image2.png以便覆盖空白区域？有什么建议吗？

其他信息：
我有另一个图像，image3.png，但这个图像在加载时没有显示任何空白。

我尝试使用jpg图像但仍然相同。

Answer 1

尝试使用负边距？

Answer 2

IE中的问题是在image1.png之后我可以在中间和下一个图像之间有一个空格

可能是IE为<map>元素保留了空间。尝试将元素放在其他位置，它可以位于<body>。

中的任何位置

Answer 3

您的IMG是一个内联元素，隐含在一个块中。该块还包含一些“文本”：DIV之前的空格。图像的默认垂直对齐是“基线”，因此您看到的空白是文本基线下的空间（例如字母“g”中的下圆圈所在的空间）。

要解决此问题，您至少需要以下选项：

删除IMG和DIV之间的所有空格（也许将IMG放在自己的DIV中）
在IMG上设置style =“vertical-align：bottom”

IE中的img问题

3 个答案: