CSDN博客

img shysky

网页标准在实践中所碰到的小问题

发表于2005/1/1 10:16:00  853人阅读

分类: WEB开发

在公司推崇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根本不用写出来。

阅读全文
0 0

相关文章推荐

img
取 消
img