前述:一个页面中图片与图片之间出现水平空隙,效果如图
代码部分如下:
- <table width="980" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <img src="images/top.jpg" width="980" height="90" border="0" usemap="#Map" />
- </td>
- </tr>
- </table>
- <map name="Map" id="Map">
- <area shape="rect" coords="706,39,742,57" href="common/center.jsp"
- target="main" />
- <area shape="rect" coords="791,44,827,61" href="common/help.jsp" />
- <area shape="rect" coords="875,48,910,66" href="login.jsp" />
- </map>
- <table width="980" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <img src="images/top_2.jpg" width="980" height="68" border="0" />
- </td>
- </tr>
- </table>
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/top.jpg" width="980" height="90" border="0" usemap="#Map" />
</td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="706,39,742,57" href="common/center.jsp"
target="main" />
<area shape="rect" coords="791,44,827,61" href="common/help.jsp" />
<area shape="rect" coords="875,48,910,66" href="login.jsp" />
</map>
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/top_2.jpg" width="980" height="68" border="0" />
</td>
</tr>
</table>
也尝试过<td><img>之间没有任何字符,以及在<img>标签加上 align="bottom"属性的写法,还是不行。最后解决的方法是在<head></head>之间插入img的css
代码如下:
- /*设定图片样式,垂直对齐,解决了图片图片之间含有空隙的情况 2011.07.27 added by Lee.will*/
- img {
- vertical-align: bottom
- }
/*设定图片样式,垂直对齐,解决了图片图片之间含有空隙的情况 2011.07.27 added by Lee.will*/ img { vertical-align: bottom }
修复后的效果图: