发现css中出现的bug以及修复方法教程


 在网页设计中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;
}


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3