关于css中出现的bug以及修复方法

与许多编程语言相比，css是一种相当容易学习的语言。它的语法简单明了，而且由于它的表现本质，开发人员并不需要处理复杂的逻辑。但是，当在不同的浏览器中测试代码时，困难就会随之出现。浏览器bug何不一至的显示方式是大多css开发人员面临的主要难题。你的设计在一种浏览器上显示的很好，但在另一种浏览器上布局可能就会支离破碎。

“css难以掌控”的误解并不来源于语言本身，而是由于为了让站点在所有主流浏览器上工作正常而采取一系列必要的措施。下面我们就来讲解一下bug的一些情况。

一、如何捕捉bug

我们都知道浏览器是有bug的，而且一些浏览器的bug比其他浏览器多。当css开发人员在自己代码中遇到了难题时，一些人就会把错误归咎于浏览器的bug，采取适当的招数。其实，大家把bug太夸大了，bug并没有人们说的那么常见。最常见的css问题并非来源于浏览器bug，而是对css规范的理解不完整。

许多开发人员是自学的，他们自行建立对效果的思维模型。当某些东西不符合他们的预期时就会把浏览器的当成罪魁祸首。为了避免这个问题，在处理css bug时最好假设自己是不是哪里写错了，带着对自己的怀疑来检查代码，每个代码推敲一下，这样的话在找出自己语法错误的时候自然就能不断提高了。当实在找不到时，再来考虑是不是浏览器bug的问题。

常见的css问题

最简单的一些css问题是由代码中的打字和语法错误造成的。防止这种bug的最好方法一是通过css检查器运行代码(ttp://jigsaw.w3.org/css-validator/)。这应该会发现所有语法错误，并且向你显示所在的行和对每个错误的简短描述。

但是也要记住，检查器只是一个自动检查的工具，并不是完全可靠。它有可能会报出让你目瞪口呆的错误，这也是检查器的bug，但是你应该能够分清楚他报出的是不是真错误。

1.特殊性和分类次序的问题

除了语法错误之外，比较常见的问题之一设计特殊性和分类次序。在将一个规则应用于元素时，却发现没有任何效果，这是往往存在特殊性问题。可以应用其他规则而且它们工作正常，但是某些规则就是不起作用，很是气人。打个比方：

我想要如下代码显示橙色的，但是它原来写的是透明的，这样运用规则：

#content p
{
background-color:transparent;
}

.intro
{
background-color:#feeca9
}

览器中测试的时候，这里仍然显示透明。这是因为于选择content p比intor的选择器的特殊性更强，在这种情况下，最好的处理方式是在intor段落选择器的开头添加内容元素的id：

#content p
{
background-color: transparent;
}

#content .intro
{
background-color: #feeca9;
}
先写到这里，要出去一下。

上一章已经讲完了“特殊性和分类次序的问题”，金额下来我们开始讲

2.空白边叠加的问题

空白边叠加是另一个如果误解就会导致很多麻烦的css特殊性。下面我们来举个例子：

<div id="box">
<p>This paragraph has a 20px margin.</p>
</div>

div框设置了10像素的空白边

#box{
margin:10px;
background-color:#d5d5d5;
}

p
{
margin:20px;
background-color:#6699ff;
}
这样你理想中的应该是div外边距是10像素和p标签产生20像素的外边距，其实际上是，只有div的10像素外边距产生了，p标签只出现了左侧和右侧有了20像素的外边距，与div的顶部和底部并没有产生外边距。

这是两个原因造成的，首先，段落的20像素的顶部空白边和底部空白边与div的10像素重叠了，形成了一个单一的20像素垂直空白。其次，这些空白边不是被div包围，而是突出到div的顶部和底部的外边。出现这种情况是由于子元素的元素计算其高度造成的。如果元素没有垂直边框或者填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方法。通过添加一个垂直边框或填充，空白边就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。代码如下：

#box{
margin:10px;
padding:1px;
background-color:#d5d5d5;
}

p
{
margin:20px;
background-color:#6699ff;
}
ok问题解决了，下一章我来讲bug捕捉的基本知识。

二、bug的隔离问题

接下来需要尝试隔离问题。通过隔离问题和识别症状，有可能查明是什么导致了这个问题并修复它。隔离问题的一种方法是在相关的元素上应用边框或轮廓，看看它们的反应：

1 #promo1
2 {
3 float:left;
4 margin-right:5px;
5 border:1px solid red;
6 }
7 #promo2
8 {
9 float:left;
10 border:1px solid green;
11 }
（我一般喜欢把边框直接在也页面添中加，这样善后处理的话就比较好处理）可以使用firefox开发人员工具条插件中的轮廓选项，或者使用用来给不同元素加轮廓的bookmarklet之一。有时候，仅仅添加边框就会修复问题，这往往就说明这个就是空白边叠加的问题。

尝试修改几个属性后，看看它们是否影响bug，如果有影响，那么是哪一个元素，那一个样式产生的影响找到这个元素，就ok了。例如，如果在两个框架之间的间隙在IE中比你想想的大，那么加大空白边，来测试，看一下会有什么变化。如果边框之间的间隙加倍了，那么可能是遇到了IE的双空白边浮动bug。

1 #promo1
2 {
3 float:left;
4 margin-right:40px;
5 border:1px solid red;
6 }
7 #promo2
8 {
9 float:left;
10 border:1px solid green;
11 }
尝试一些常见的解决方案。例如，将position属性设置为relatively、将display属性设置为inline（在浮动元素上）或者设置宽度或者高度的属性，让它增高或者缩短，都可以修复许多IE bug。这样的话你就可以找到很多css问题，从而达到对其了解和修复它们！

（喜欢学习的和想与我探讨知识的留下你的邮箱或联系方式，或者跟我发邮件，747850255@qq.om

补充：web前端 , HTML/CSS  ,