您现在的位置: 爱51代码网 >> 范文 >> 文章正文
CSS下img图片多余空白或者是表格中有空隙Bug的解决方案

CSS下img图片多余空白或者是表格中有空隙Bug的解决方案

在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

  1、将图片转换为块级对象

  设置img为“display:block;”。在本例中添加一组CSS代码:“#sub img {display:block;}”。(PS,我遇到的问题就是用这个方法解决的。我把a img {display:block;}这样定义好后,A属性的高度就不会比预料的高了。注意不要定义 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的一种情况,具体解决方案的还得各位见招拆招了。

  • 上一篇文章:

  • 下一篇文章: 没有了
  • 最新文章 热点文章 相关文章
    E-business suite system servic
    ZOJ 3700 Ever Dream 文章中单词
    TortoiseGit和msysGit安装及使用
    asp中有一段javascipt的网页鼠标
    sharepoint 2010 获取用户信息Us
    设计包含max函数的队列
    随机从数组中取出指定的不重复的
    mysql主从同步延迟方案解决的学习
    青岛科学六年级下册教材分析
    生日旅行总结
    sharepoint 2010 获取用户信息Us
    mysql主从同步延迟方案解决的学习
    生日旅行总结
    中小板生日快乐随感
    送生日快乐桑葚乳酪小蛋糕
    写给女儿的生日快乐
    总分公司财务核算
    恢复使用繁体字可行性研究报告
    青少年吸烟心理探析
    保险受益人制度相关问题的探讨
    为什么说任何基于比较的算法
    E-business suite system se
    ZOJ 3700 Ever Dream 文章中
    TortoiseGit和msysGit安装及
    Eclipse、MyEclipse使用git插
    asp中有一段javascipt的网页
    js倒计时,即使刷新也没事源
    AJAX 访问php数据库返回结果
    js解析java字符串代码
    C#读txt如何只读取部分内容
     



    设为首页 | 加入收藏 | 网站地图 | 友情链接 |