`
xixian
  • 浏览: 215338 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DIV+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:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
分享到:
评论

相关推荐

    DIV+CSS布局大全

    #### 十四、网页设计DIV+CSS——第12天: 校验及常见错误 ##### 校验工具 - **XHTML校验**:使用在线校验工具检查XHTML文档的合法性。 - **CSS2校验**:使用CSS校验工具检查样式表的语法错误。 #### 十五、CSS的十八...

    div+css布局大全

    #### 十二、校验及常见错误 - **XHTML校验**:使用在线工具如W3C Markup Validation Service来进行校验。 - **CSS2校验**:同样可以使用W3C提供的CSS Validation Service来检查CSS语法错误。 #### 十三、CSS技巧 - ...

    DIV CSS常见错误汇总

    应用应用DIV CSS编码时很容易犯一些错误。本文列举了一些常见的错误:  1. 检查HTML元素是否有拼写错误、是否忘记结束标记  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。...

    我收集的css精品文章

    9. **DIV+CSS常见错误汇总.doc**:此文档可能列举了使用div元素配合CSS布局时常见的错误,如盒模型理解不当、浮动元素的清理,以及绝对定位问题等,并提供解决建议。 10. **由浅入深漫谈margin属性.doc**:深入解析...

    CSS 初学者常犯错误汇总

    ### CSS初学者常犯错误汇总 #### 一、概述 对于初学者而言,在学习和使用CSS(层叠样式表)的过程中经常会遇到各种各样的问题。这些问题不仅会降低工作效率,还可能导致网页布局出现意料之外的结果。本文将针对CSS...

    CSS浏览器兼容汇总

    ### CSS浏览器兼容汇总 在网页开发过程中,遇到不同浏览器对CSS的支持程度不一的问题非常常见。这不仅影响了用户体验,还增加了开发者的负担。本文将详细介绍一些常见的浏览器兼容性问题及解决方案,帮助开发者更好...

    浏览器兼容问题汇总

    在使用DIV+CSS布局时,开发者需注意各浏览器对CSS样式的处理方式有所不同。例如,在Firefox、IE7及以上版本中,可以使用!important规则来确保特定样式优先级高于其他规则。然而,这一特性在IE6中并不支持。为了解决...

    关于css兼容性问题及一些常见问题汇总

    这些是CSS在IE6和IE7中常见的兼容性问题及其解决方案。随着现代浏览器的普及,这些问题已经逐渐减少,但在维护旧项目或支持旧浏览器时,这些知识仍然非常有用。在实际开发中,使用条件注释、CSS hack(如`*html`,`_...

    目前比较全面的浏览器CSS BUG兼容汇总

    在IE6中,当一个设置了`float`属性的div应用`margin`时,IE会错误地将其加倍。解决方法是给该div添加`display: inline;`,这可以使IE正确解析margin。 4. **浮动产生的双倍距离** IE浏览器中,当一个浮动元素(如...

    前端面试题汇总

    - **代码简洁**:div+css 更加清晰,易于维护。 - **表现与内容分离**:CSS 负责样式,HTML 负责结构。 - **易于优化**:有利于搜索引擎抓取。 - **可复用性强**:样式可以应用于多个页面。 - **响应式设计**:适应...

    js实现div在页面拖动效果

    8. 资源推荐:文档最后推荐了几个与JavaScript相关的专题链接,如《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧》,供对...

    营销型网站的六大优点汇总

    3. DIV+CSS技术:使用此技术可加快网页加载速度,提高用户体验。 4. 广告设计:多种广告形式增强互动,推广新产品。 5. 避免Flash首页:考虑到搜索引擎不友好的因素,不推荐使用。 6. JavaScript处理:减少页面内的...

Global site tag (gtag.js) - Google Analytics