img图片元素下多余空白解决方案

  在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳, 供大家参考。
1、将图片转换为块级对像
即,设置img为:
display:block;
在本例中添加一组CSS代码:
#sub img {display:block;}
2、设置图片的垂直对齐方式
即设置图片的vertical-align属性为「top,text-top,bottom,text-bottom」也可以解决。如本例中增加一组CSS代码:
#sub img {vertical-align:top;}
3、设置父对象的文字大小为0px
即,在#sub中添加一行:
font-size:0;
可以解决问题。但这也引发了新的问题,在父对像中的文字都无法显示。就算文字部分被子对像括起来,设置子对像文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。
4、改变父对象的属性
如果父对象的宽、高固定,图片大小随父对像而定,那麽可以设置:
overflow:hidden;
来解决。如本例中可以向#sub中添加以下代码:
width:88px;height:31px;overflow:hidden;
5、设置图片的浮动属性
即在本例中增加一行CSS代码:
#sub img {float:left;}
如果要实现图文混排,这种方法是很好的选择。
6、取消图片标签和其父对象的最後一个结束标签之间的空格。
这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然 会让标签和其他标签换行显示,比如说DW的「套用源格式」命令。所以说这个方法可以供我们了解出现BUG的一种情况,具体解决方案的还得各位见招拆招了。

时间: 2024-08-22 14:14:46

img图片元素下多余空白解决方案的相关文章

CSS关于解决图片元素下多余空白的BUG

在进行页面的DIV+CSS排版时,遇到浏览器中的图片元素img下出现多余空白的问题绝对是常见的.对于该问题的解决方法也是"见机行事",根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考. 1.将图片转换为块级对象 即,设置img为"display:block;".在本例中添加一组CSS代码:"#sub img {display:block;}". 2.设置图片的垂直对齐方式 即

img图片下多余空白的BUG解决方案

在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是"见机行事",根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考. 1.将图片转换为块级对象 即设置img为"display:block;".在本例中添加一组CSS代码:"#sub img {display:block;}&quo

img标签下多余空白的解决方法

在进行页面的css.shtml' target='_blank' >div CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是"见机行事". 1.将图片转换为块级对象 即,设置img为"display:block;".在本例中添加一组CSS代码:"#sub img {display:block;}". 2.设置图片的垂直对齐方式 即设置图片的verti

img标签下多余空白BUG解决方法

根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考. 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是"见机行事". 1.将图片转换为块级对象 即,设置img为"display:block;".在本例中添加一组CSS代码:"#sub img {display:block;}&q

图片元素img在IE6下出现多余空白问题

在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问 题的解决方法也是"见机行事",根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大 家参考. 1.将图片转换为块级对象   即,设置img为: display:block;   在本例中添加一组CSS代码: #sub img {display:block;} 2.设置图片的垂直对齐

清除行内元素之间HTML空白的几种解决方案

行内块(inline-block)是非常有用的特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时,行内元素之间的空白有时候显示在屏幕上那是相当的讨厌   至今我还记得年轻是在IE6上开发的那些苦逼日子,特别希望IE浏览器采用 inline-block 的显示方式. 行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空

360浏览器-导航图片与下拉菜单之间有一段空白

问题描述 导航图片与下拉菜单之间有一段空白 我的导航图片在ie9上,没有问题,但是在360浏览器上就会出现问题,文字导航没有问题,只要是图片导航就会出现一段间隔.请问这是怎么回事? 解决方案 360是急速还是还是兼容模式?360兼容模式有些是有用的ie7核心,你要指定内部absolute定位菜单的top属性为你的容器高度才行. 解决方案二: 真心谢谢你的回答,最新版的360和搜狗都不可以 解决方案三: 嗯,您说的对,设计一下image的相关属性就可以了

asp.net的MVC前台调用js图片特效出现页面空白???????

问题描述 js代码写在一个单独的js文件里面代码是:funtionimageflash(){varpic_width=500;//图片宽度varpic_height=200;//图片高度varbutton_pos=4;//按扭位置1左2右3上4下varstop_time=3000;//图片停留时间(1000为1秒钟)varshow_text=0;vartxtcolor="000000";//文字色varbgcolor="DDDDDD";//背景色varimag=ne

html5 canvas上有多个图片元素,如何实现每个图片能用鼠标拖拽移动?或是有其他的方法= =

问题描述 html5 canvas上有多个图片元素,如何实现每个图片能用鼠标拖拽移动?或是有其他的方法= = 像上图所示,图片都放在canvas上,要实现像装扮类游戏可以拖拽图片 var hair2 = new Image(); hair2.src = ""头发2.png""; hair2.onload = function(){ canv.drawImage(hair2660130171190); };画布和图片是按照上述方法贴上去的.求指点,谢谢么么哒~ 解决方