7 01 2009

[搞定]xhtml1-strict.dtd下图片和div之间的莫名4px

bigCat Posted in CSS - for Comments = 12

strict-img-div-space为了洁身自好,写页面都基于Strict.dtd\r\n但遇到个奇怪的问题,不是IE的3px bug,而是Firefox和IE7/8浏览器通用的4px莫名间隔...(6居然正常)\r\n\r\n如图所示\r\ndiv里的img下面莫名多了4px\r\n\r\n

\r\n
\r\n \r\n
\r\n

\r\n\r\n也不知道为什么会这样...\r\n解决方法和解决IE3px bug一样\r\n\r\n

\r\nimg {\r\n	vertical-align:middle;\r\n	display:block;\r\n}\r\n

\r\n\r\n上面俩样式二选一即可\r\n\r\n有高人解释否?\r\n\r\n\r\n\r\n\r\n\r\n

感谢soda同学的指点:\r\n在firefox下确切的说是3.5px,可以用firebug查看一下computed style,Box Model的height属性相应的增加了3.5px.\r\nvertical-align,font-size,line-height属于line-box布局元素的属性加载直接包含img的父容器上,都可以避免3.5px的出现.\r\n同效,而将img的display属性设置为block是将ling-box布局的元素直接转换为block box布局的元素.\r\nimg在html中应该属于replaced element,所谓replaced element也就是说内容并不属于文档(document)的一部分,而是相应的会使用外部文件替换此节点,可能和这个有关系,没有深究,我再看看相关的文档.\r\n考虑一下:\r\nvertical-align:middle;font-size:0;line-height的值<=10时空白是不存在的.\r\n变更一下font-size值或者line-height值,看一下box module的height变化,\r\nfirefox默认的font-size:16px;line-height:18px;\r\n另外safari,opera出现的空白值为2px,chrome下没有空白.\r\n可能和系统字体设置有关.也可能和渲染方式有关.\r\n

  1. Enson says:

    看不懂这是什么DD的掩面跑开~~~\n不要告诉我这是沙发哦...

  2. Enson says:

    @bigCat, 那个feed一直都有订阅 要不我怎么会跑到这边来...

  3. bigCat says:

    @飞鱼, 期待!拜托了...

  4. bigCat says:

    @Enson, 呃,这边都是疑难杂症...也没有入门介绍或什么的,重在难...恩...\n推荐订阅这个feed\nhttp://feed.ooxx.me

  5. bigCat says:

    @飞鱼, - - 为啥transitional的时候正常....\n偶这边的情况是div和img都不定高\n而且设置block和middle为什么就能解决了?\nIE下面还有个hasLayout可以解释下...

  6. 飞鱼 says:

    这个貌似是 图片下方的恶心间隙当 容器 没定高度的时候,img 的inline 属性会赐予它恶心的下边距,\n我的解决办法 都是打成块。\nvertical-align:middle;\n这东西 没试过。\n\n当然 给 容器定高度 然后 overflow-y:hidden 掉 也行呢··比较无耻

  7. bigCat says:

    @飞鱼, 给你写邮件了哈

  8. 飞鱼 says:

    才发现这么个站, 挺好的呢· 给我个会员整整 一起更新哒~~^o^

  9. 飞鱼 says:

    @bigCat, 得~ 这么高深的问题 我去请丁大哥· 来解决\n他是前端一霸

  10. soda says:

    大猫,在firefox下确切的说是3.5px,可以用firebug查看一下computed style,Box Model的height属性相应的增加了3.5px.\nvertical-align,font-size,line-height属于line-box布局元素的属性加载直接包含img的父容器上,都可以避免3.5px的出现.\n同效,而将img的display属性设置为block是将ling-box布局的元素直接转换为block box布局的元素.\nimg在html中应该属于replaced element,所谓replaced element也就是说内容并不属于文档(document)的一部分,而是相应的会使用外部文件替换此节点,可能和这个有关系,没有深究,我再看看相关的文档.

  11. soda says:

    考虑一下:\nvertical-align:middle;font-size:0;line-height的值<=10时空白是不存在的.\n变更一下font-size值或者line-height值,看一下box module的height变化,\nfirefox默认的font-size:16px;line-height:18px;\n另外safari,opera出现的空白值为2px,chrome下没有空白.\n可能和系统字体设置有关.也可能和渲染方式有关.

Host: (miao) | Word: Press | Code: HTML5