在公司推崇web standards并彻底转变原先的工作流程和思路，布局+内容+皮肤基本三层元素分离。
我通常会定义body(或div)的字体属性,问题在IE中出现了(非IE正常)~
1.当遇到div中嵌套form时,div会被撑大；
2.当定义div的height值(总值)小于12px(比如有些装饰用的背景图片只有5-10px高)，div也会被撑大；
第一个问题很好解决：定义form的margin: 0px;padding: 0px;属性即可or <div id="headerLine"><!-- --></div>
第二个问题先前以为是IE的问题，因为在其他的非IE浏览器里预览都很正常。
但今天突然想到原来用table做几个象素高的重复背景时,是将其td的空格符号删除,罪魁祸首就是默认的字符大小占据了高度,尝试将属性font-size: 0px;不管height值多小~都不会被撑大了~
还有些其他的小问题也值得思考~例如“li”的background-image或list-style-image属性的利弊等等~在实践中我们都会遇到~
重构之美－迎接网站标准化设计的来临（第二天，几乎放弃）
通过一些讨论，关于div等IE 15px高度BUG问题，感谢No3和cloudchen各给出了一个很好的解决办法：
1、设置line-height，例：XX{line-height: 1px; }
2、设置overflow，例：XX{overflow: hidden; height: 1px}
个人感觉，line-height很直观简单，overflow稍需理解。
唉……我真是郁闷啊！
另外，设置font-size并不能解决问题，很简单，你用这个办法画一条1px的背景线来看看，不行的，最小也是2px。
还有你的样式太不简洁了，帮你简写你看看：
#headerLine {MARGIN: 0px 0px 0px 0px; PADDING:0px 0px 0px 0px; BORDER: 0px ;BACKGROUND: url(2005_bar.gif) ; WIDTH:100%;height:1px;}
相当于
#headerLine{margin: 0; padding: 0; background: url(2005_bar.gif); height: 1px;}
你看看，几乎减了一半下来，如果放在整体里面，甚至margin和padding也许都不用。最后加上一个overflow: hidden; 就行了。 100%的width和0的border根本不用写出来。
发表于 @ 2005年01月01日 10:16:00|评论(loading...)|编辑