SEO培训包就业班 SEO培训企业班 SEO培训全能班 SEO培训周末班 网页设计培训班
 首页 > 网页设计知识 > 图片元素下有多余空白的全能解决方案
网页设计知识

图片元素下有多余空白的全能解决方案

来源:luoxuewei   时间:2011-1-25 16:07:52   浏览: 次  字体:[ ]  我要投稿
文章概述:在网页设计排版的时候,图片元素下有空白的范围怎么办?不用担心,这样时候还要根据具体出现问题的原因而选择针对性的解决方法,下面和德曼一起看一看吧!

在进行页面的DIV+CSS排版时,经常会遇到IE6浏览器中的图片元素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的一种情况,具体解决方案的还得各位见招拆招了。


你浏览的文章是 - 《图片元素下有多余空白的全能解决方案》!
文章出处:http://www.deman.cc/WebDesign/633.html | 复制网址
版权声明:合肥德曼SEO培训中心是专业的SEO培训机构,中国SEO优化技术人才的摇篮!
【声明】以上文章或资料除注明为自创或编辑整理外,均为各方收集或网友推荐所得。其中摘录的内容以共享、研究为目的,不存在任何商业考虑。目前网站上有些文章未注明作者或出处,甚至标注错误,此类情况出现并非不尊重作者及出处网站,而是因为有些资料来源的不规范。如果有了解作者或出处的原作者或网友,请告知,本网站将立即更正注明,并向作者或出处单位道歉。被摘录的对象如有任何异议,请与本站联系,联系邮箱:dm35@vip.qq.com,本站确认后将立即撤下。谢谢您的支持与理解!
☆☆ 搜索引擎有多远,SEO就能走多远!
★★了解德曼SEO培训中心 ↓↓

 » 德曼SEO教学团队介绍
 » 德曼SEO教学特色
 » 德曼培训课程设置
 » 德曼SEO教学环境
在线QQ咨询:513816851   461436777
德曼SEO培训群:48812488   27175177
报名电话:0551-3221973  13909691973
上班时间:周一至六:08:30-18:00