CSSbug的发现及bug修复 IEbug修复

我们都知道浏览器是有bug 的,有的浏览器bug多,有的bug少,我们一遇到显示不正常,往往马上就认为这个bug,开始寻找hack或其他方法,其实bug并没有想象的那么常见,最常见的bug并非来源于浏览器bug,而是源于对CSS规范的理解不完整,这里我举个例子:

想要将内容区域的所有文字都设置为#333这样的颜色,然后设置了第一条规则,但是有希望intro部分是#f90这样的颜色,然后设置了第二条语句。

.content p {

Background-color:#333;

}

.intro {

Background-color:#f90;

}

如果在浏览器中测试这段代码,就会发现,intro部分仍然是灰色的(#333),这是因为与选择intro段落的选择器相比,选择容器区域所有段落的选择器的特殊性更强,为了实现想要的结果,需要让intro段落选择器更特殊。在这种情况下,最后的方法是在intro段落选择器前面架势内容元素的class:

.content p {

Background-color:#333;

}

.content .intro {

Background-color:#f90;

}

不要随便添加更加特殊的选择器哦,这样只会让你的代码更乱。

上面归结起来是特殊性的问题,下面说下外边距叠加的问题

有这样的一段html

<div id=”box”>

<p>这是一个段落,外边距为20px</p>

</div>

Div框设置了10像素的外边距,段落设置了20像素的外边距:

#box{

Margin:10px;

Background-color:#d5d5d5;

}

P{

Margin:20px;

Background-color:#69f;

}

看到这样的代码,你自然会认为像这样,

其实不是的,实际产生的图是这样的

 

这里发生了两个情况,首先,段落的20像素顶外边距和底外边距于div 的10像素外边距叠加,形成了一个20像素的外边距。其次,段落的外边距不是被div包围,而是突出到div 的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度的方式造成的。

解决方法,加个很小的padding或者加个和背景一样的边框。

#box{

Margin:10px;

Padding:1px;

Background-color:#d5d5d5;

}

P{

Margin:20px;

Background-color:#69f;

}

以前调试的时候,总喜欢加背景,一个块一个块的就分开了,加border的话宽度就会增加,有可能破坏布局,但是有时候,border确实一个非常好的方法,有些问题可能一些就解决了

还有以前开发的时候,主要使用IE开发,每次修改后,都在IE中浏览页面,看是否正确,页面差不多完成后,再去其他浏览器看各种bug。这样的后果是很不好的,因为IE,尤其是IE6有很多bug,如果经常使用IE6,会错误的理解为IE的表现是正确的,因此奇怪为什么现代浏览器破坏了原来的页面。

今天帮网友修正一个页面问题。。很长时间没能搞定。。败!

 

原文链接:,转发请注明来源!

发表评论