Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

网页设计技巧:CSS 布局调试的有效方法 v

出处:天极网软件频道 责任编辑:杨玲

  网页设计中CSS 布局 是很重要的部分,下面介绍几种检查调试 CSS 布局 的有效方法。

  1. 检查 HTML 元素是否有拼写错误、是否忘记结束标记

  即使是老手也经常会弄错 div 的嵌套关系。可以用 dreamweaver 的验证功能检查一下有无错误。

  2. 检查 CSS 是否书写正确

  检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用 CleanCSS 来检查 CSS 的拼写错误。CleanCSS 本是为 CSS 减肥的工具,但也能检查出拼写错误。

  3. 用删除法确定错误发生的位置

  如果错误影响了整体布局,则可以逐个删除 div 块,直到删除某个 div 块后显示恢复正常,即可确定错误发生的位置。

  4. 利用 border 属性确定出错元素的布局特性

  使用 float 属性布局一不小心就会出错。这时为元素添加 border 属性确定元素边界,错误原因即水落石出。

  5. float 元素的父元素不能指定 clear 属性

  MacIE 下如果对 float 的元素的父元素使用 clear 属性,周围的 float 元素布局就会混乱。这是 MacIE 的著名的 bug,倘若不知道就会走弯路。

  6. float 元素务必指定 width 属性

  很多浏览器在显示未指定 width 的 float 元素时会有 bug。所以不管 float 元素的内容如何,一定要为其指定 width 属性。

  另外指定元素时尽量使用 em 而不是 px 做单位。

  7. float 元素不能指定 margin 和 padding 等属性

  IE 在显示指定了 margin 和 padding 的 float 元素时有 bug。因此不要对 float 元素指定 margin 和 padding 属性 (可以在 float 元素内部嵌套一个 div 来设置 margin 和 padding)。也可以使用 hack 方法为 IE 指定特别的值。

  8. float 元素的宽度之和要小于 100%

  如果 float 元素的宽度之和正好是 100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于 99%。

  9. 是否重设了默认的样式?

  某些属性如 margin、padding 等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的 margin、padding 设置为 0、列表样式设置为 none 等。

  10. 是否忘记了写 DTD?

  如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行 DTD:

 

http://www.w3.org/TR/html4/loose.dtd">


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步