Posts Tagged ‘firefox’

7 01 2009

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

bigCat Posted in CSS - 12 Comments

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

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