1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

DIV+CSS页面布局中BUG解决方法

作者:用户 来源:互联网 时间:2016-07-17 14:00:58

cssbug页面样式浮动检查

DIV+CSS页面布局中BUG解决方法 - 摘要: 本文讲的是DIV+CSS页面布局中BUG解决方法, DIV+CSS布局中,出现BUG之后,可以考虑从以下几方面检查。 一、检查页面的标签是否闭合  不要小看这条,也许折腾了你两天都没有解决的 CSS BUG

DIV+CSS布局中,出现BUG之后,可以考虑从以下几方面检查。 一、检查页面的标签是否闭合
  不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。
  快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。

二、样式排除法
  有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。
  对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。

三、模块确认法
  有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。

四、检查是否清除浮动
  其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的,推荐使用 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动,会有太多的限制性)。

五、检查 IE 下是否触发 haslayout
  很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》(如果无法翻越穿越伟大的 GFW,可阅读 蓝色上的转帖 )
  快捷提示:如果触发了 haslayout,IE 的调试工具Internet Explorer Developer Toolbar中的属性中将会显示 haslayout 值为 -1。

六、边框背景调试法
  故名思议就是给元素设置显眼的边框或者背景(一般黑色或红色),进行调试。此方法是最常用的调试 CSS BUG 的方法之一,对于复杂 BUG 依旧适用。经济实惠还环保^^

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , bug , 页面 , 样式 , 浮动 检查 div css布局入门教程、div css 布局教程、div css布局、div css布局实例、divcss布局经典实例,以便于您获取更多的相关知识。

div布局-DIV + CSS设计中的DIV是指的html中的div标签吗?

... DIV+CSS是WEB设计标准,它是一种网页的布局方法。不是指页面的div标签的。 参考:http://baike.baidu.com/link?url=lf2dUBDDlOdMJHnoAr-bUvWbZQ_JBgQr8z__vWe3mUr5XesIP_2Gf65cXxgENgzCSVOLkxK5FMj3rFO0ZRBoTq 解决方案二: DIV+CSS中的一些常见标签---------------...

CSS浮动属性Float入门教程

...为“文本环绕”。在网页设计中,应用了css的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被...

IE与Firefox下对CSS解析的区别

...loat属性,于是我开始动手试验, float:left的话,div就跑到页面最左边去了,这好办,我在它的外面再套一层div,把位置定好,那么里面的就算float:left也不会被移动位置了。 xhtml:==========================================================      ...

2008年对我总体来说是个丰收年

...,然后那一段我整天一下班时就在家里用DIV写网页,写Ext页面,时间久了,坏习惯终于养成了,看见table就烦,一看见页面就想如果用DIV+CSS应该怎么布局。当时应该是五月份了,学校又该交毕业设计了,于是乎(呵)就用我刚学...

前端js与css兼容性问题

...问题还是CSS问题,因为一点点布局上的bug,可能导致整个页面的错位,在用户看来这是极不专业的。 现在我就简要说说我对CSS兼容问题的认识: 先说点Hack的知识(真正的高手是不用Hack的,但要成为高手必须通过Hack这一关)123...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备