网页标准在实践中所碰到的小问题
2005-01-01 10:16
363 查看
在公司推崇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根本不用写出来。
我通常会定义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根本不用写出来。
相关文章推荐
- 在Ubuntu上为Android系统编写Linux内核驱动程序--实践中碰到的问题
- 2003下从网页中把数据导出到excel时,碰到"Automation 服务器不能创建对象"的问题
- 网页标准常见问题
- 运行"使用DroidPlugin实践应用的插件化"里面demo碰到的问题(附个人解决方案)
- 网页设计-[常用CSS缩写语法总结、标准的N种死法及网页设计必须注意的几个问题 ]
- 微信网页开发碰到的几个问题
- 实践 Agile Web Development 4th edition 时碰到的问题汇总
- 项目实践——服务器间通信部署时碰到的问题解决方案
- 网页表单中的汉字存储到数据库, 再从数据库中提取并显示到网页时碰到的乱码问题。
- 网页标准常见问题
- 关于网页标准与JAVAScript执行的问题
- atl 标准控件在用多线程发消息时VC可以接收但网页无法接收的问题
- 搞清了网页标准的几个问题
- CDH5实践(四)Cloudera Manager 5安装中碰到的一些问题和解决办法
- 干货:基于 Git Flow 的 Git 最佳实践(附加解决大家经常碰到的问题)
- [导入]关于网页标准与JAVAScript执行的问题
- 网页常见问题自查表及测试标准
- 关于网页标准与JAVAScript执行的问题
- 网页关键字碰到的问题
- 网页标准常见问题