精通css(9)bug和修复bug

简介:

浏览器bug和不一致的显示方式是大多数CSS开发人员面临的主要问题。本文就bug问题作一些学习。

1.bug来源于自己

如果你写的布局跟你想象的不太一致,不要以为这是浏览器bug,首先应该想象是不是自己的问题。要么手贱忘了写";"或者把单词拼错了,要么是自己对css理解还不够。

2.IE中的bug

IE上的bug无疑是众多浏览器中最多的,这主要是它的显示引擎使用了layout(布局)。这是许多IE/Win显示bug的根源,所以理解layout概念还是很重要的。

2.1何为layout

layout是IE特有的,并非CSS的属性。IE使用layout来控制元素的尺寸和定位。那些拥有布局(have layout)的元素负责本身及其子元素的尺寸设置和定位。如果一个元素don't have layout,它的尺寸和位置就由最近的have layout的祖先元素控制。
默认情况下have layout的元素有body,html(标准模式中),table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee。可以使用JS的hasLayout函数来查看一个元素是否have layout。
另外,设置以下css属性会使元素have layout:
float:left/right;
display:inline-block;
width/height/zoom:任何值;
IE7中,以下属性也可以触发布局:
max-width:除none以外;
min-width:任何值;
overflow:hidden,scroll,auto;

2.2 layout带来的问题

1.IE6以下,如果段落have layout,那么就会限制为矩形,阻止了文本围绕浮动元素;
2.have layout的元素,如果子元素内容比自己还大,该元素会自动扩张,其width属性更像是min-width属性;
3.have layout的元素不会收缩;
4.对浮动元素自动清理;
5.相对定位元素don't have layout;
6,have layout的元素之间外边距不会叠加!呵呵;
7.在don't have layout的块级链接上单击,只会覆盖文本区域;
8.在滚动时,列表项上的背景图像间歇性的显示或消失.
许多IE的bug都可以通过触发layout来修复,IE7对layout的一些bug进行了修复,但还是使用layout显示引擎。直到IE8,才使用全新的显示引擎。

2.3修复bug

你可以使用条件注释,使用hack,使用过滤器,但这都是不到万不得已的情况下不会使用的方法。

2.3.1双外边距浮动bug

2.3.2 3像素文本偏移bug
2.3.3 IE6重复字符bug
2.3.4 IE6”藏猫猫“bug
2.3.5相对容器中的绝对定位


相信随着wb技术的发展,IE的进化终将让我们遗忘这些特有的Bug。

相关文章
|
6月前
|
Web App开发 前端开发 开发者
|
前端开发
css calc() 的使用方法,里面包含bug
在做后台管理系统的时候吗,我们通常会发现,左侧的菜单需要出去顶部后自动布满整个屏幕,并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。 但是用的不好的话,会发现没有作用。
css calc() 的使用方法,里面包含bug
|
前端开发
【BUG日记】【CSS】top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)
【BUG日记】【CSS】top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)
229 0
【BUG日记】【CSS】top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)
|
前端开发 JavaScript
【BUG】【CSS】【JS】JavaScript动态添加CSS的class类样式不生效,原因是css样式优先级在加载css文件的时候就确定下来的.
【BUG】【CSS】【JS】JavaScript动态添加CSS的class类样式不生效,原因是css样式优先级在加载css文件的时候就确定下来的.
464 0
【BUG】【CSS】【JS】JavaScript动态添加CSS的class类样式不生效,原因是css样式优先级在加载css文件的时候就确定下来的.
|
Web App开发 前端开发 容器
|
Web App开发 前端开发
CSS - 移动端 常见小bug整理与解决方法总结【更新中】
常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题:   原理是因为:1px在手机上是使用2dp进行渲染的。换成 border: 0.5像素?是不行的!                                                              ...
1077 0
|
Web App开发 前端开发 容器
|
Web App开发 前端开发 iOS开发