`

网页图片之间有空隙的解决办法

    博客分类:
  • CSS
阅读更多

前述:一个页面中图片与图片之间出现水平空隙,效果如图

 

 

代码部分如下:

 

<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
}

 修复后的效果图:

 

分享到:
评论
2 楼 dlb415519095 2012-04-06  
赞一个,解决了问题
1 楼 wulaiyatou 2011-12-02  
赞一个。

相关推荐

    img图片在ie下有有空隙

    #### 其他可能的原因及解决办法 除了上述提到的方法外,还有一些其他的因素也可能导致图片周围的空隙问题: - **图片自身的CSS样式**:有时候图片自身定义了一些额外的CSS样式,比如 `margin`、`padding` 等,这些都...

    img使用br换行后之间有空隙的解决方法

    在网页设计中,图片元素(img)的布局是一个常见的任务,而有时我们可能会遇到两个或多个图片换行排列时出现空隙的问题。这个问题主要是由于浏览器默认的行内元素对齐方式导致的。`&lt;img&gt;`标签在HTML中被定义为行内元素...

    IE浏览器下的图片空隙间距BUG和解决办法.pdf

    解决这个问题的方法有很多种,以下是几种常见的解决方案: 1. **浮动元素**:将`&lt;li&gt;`元素设置为浮动元素,如`float:left;`,这样可以消除上下文的影响,但需要注意清除浮动以防止布局问题。 ```css li { float: ...

    手机网页设计注意事项和解决方法

    网页之间的空隙我们一般用空格表示,因为手机中不会说文字之间有太大的距离,所以一般用空格"&nbsp;"表示,或者 margin 和 padding 值也可以用,但最好不要超过。 手机网页设计需要考虑到很多因素,如屏幕大小、...

    li中插入img图片间有空隙的解决方案

    总结来说,解决`&lt;li&gt;`中`&lt;img&gt;`图片间空隙的问题,可以采用调整`vertical-align`属性或者设置`font-size: 0`的方法。具体选择哪种方案,应根据实际项目的需求和结构来确定。在实际开发中,可能还需要考虑浏览器兼容...

    img与容器下边界的空隙(缝隙) 的解决方法

    在网页设计中,有时会遇到一个常见的问题,即图片(img)与包含它的容器(通常是div)之间的下边界出现空隙或缝隙。特别是在Internet Explorer 7(IE7)浏览器中,这种现象尤为突出,而在更新的浏览器如IE8中则不太...

    实现在表格中插入图片没有间隙

    默认情况下,这些值通常不是0,导致图片之间出现空隙。 #### 二、解决方案 为了避免图片间的空隙,我们需要设置表格的相关属性为0,具体步骤如下: 1. **定义表格**:在HTML代码中定义表格时,需要指定`border`、...

    用css margin去掉横排图片之间的间距

    在网页设计中,使用CSS布局时,经常遇到一个问题,那就是元素之间的间距问题,特别是当横排展示多张图片时,图片之间可能会出现不期望的缝隙。这个问题在标题和描述中被提到,即“怎样去掉横排图片之间的间距”。...

    图片放大缩小

    这是因为数字图像由像素组成,当图像被放大,像素之间的空隙被填充,如果简单地增加像素数量,可能会导致图像变得模糊或出现马赛克效果。为了解决这个问题,专业的图像处理软件采用了各种算法来优化放大过程。 ...

    div里的图片距离div下边框多3个像素的解决方法

    在网页设计中,有时会遇到一个常见的问题,即图片在`div`容器内与下边框之间存在3个像素的额外间距,这被称为"3像素bug"。这个问题通常是由于浏览器的渲染机制导致的,尤其是在处理行内元素如`img`标签时。下面我们...

    前端处理浏览器兼容问题

    **解决方法**:有多种解决方案,包括调整源代码格式、修改图片的`display`属性、设置`vertical-align`以及使用`overflow:hidden`。 1. **源代码调整法**:确保`&lt;/div&gt;`和`&lt;img&gt;`在同一行。 2. **Block Display法**...

    css浏览器兼容问题

    9. **IE6-7图片下有空隙问题**: 可以通过让`&lt;/div&gt;`与`&lt;img&gt;`在同一行、设置`display:block;`、`vertical-align:top/middle/bottom;`、`overflow:hidden;`或`float:left;`来消除图片下方的空隙。 10. **IE6双倍...

    初学DIV 如何命名 结构 思路

    实现列表项的横向排列时,确保代码书写紧凑,避免不必要的空白字符,使用`float:left`结合`margin:0`或`padding:0`可以有效去除列表之间的空隙。 ### 总结 学习和掌握DIV+CSS不仅是一门技术,更是一种艺术。从命名...

    前端入门10个css bug顺口溜

    2. **解决办法:** 明确设置元素的`height`属性,尤其是对于需要固定高度的容器,这有助于避免此类问题的发生。 #### 四、兼容各个浏览须注意,默认设置行高可能是杀手 **知识点:** 1. **行高(line-height):** ...

    CSS 速记口诀 可以解决一些常见问题

    掌握这些CSS速记口诀,可以在遇到问题时迅速找到解决办法,提高开发效率,同时也能使代码更加整洁,增强浏览器兼容性。通过不断练习和理解CSS的底层原理,设计师和开发者能够更自如地驾驭CSS,创造出优秀的网页布局...

    前端HTML5 css基础

    + `height`:图片高度,设置宽高时,图片可能变形,解决方法:设置宽或高,让图片等比例。 + `border`:图片边框。 HTML 音频标签 ------------- * `&lt;audio&gt;`:音频标签,播放音频。 * 属性: + `src`:音频...

    C#编程经验技巧宝典

    2 &lt;br&gt;0003 设置程序代码行序号 3 &lt;br&gt;0004 开发环境全屏显示 3 &lt;br&gt;0005 设置窗口的自动隐藏功能 3 &lt;br&gt;0006 根据需要创建所需解决方案 4 &lt;br&gt;0007 如何使用“验证的目标架构”功能 4 ...

    jquery.marquee.js官方下载

    - `gap`:元素之间空隙的像素值。 - `delayBeforeStart`:滚动开始前的延迟时间。 - `direction`:滚动方向,可以是`up`(垂直向上)、`down`(垂直向下)、`left`(水平向左)或`right`(水平向右)。 - `...

    DIV+CSS常见问题的14条原因分析

    8. **img标签后的空白字符**:在Firefox和IE7中,img标签后的空白字符会导致图片底部与容器底部之间有空隙。消除此问题的方法是确保img标签直接闭合或设定`display:block`。 9. **失去line-height效果**:在IE6下,...

Global site tag (gtag.js) - Google Analytics