CSS의 버그 및 수정 방법

与许多编程语言相比，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特殊性。下面我们来举个例子：

This paragraph has a 20px margin.

div 상자는 10픽셀 여백으로 설정됩니다

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

p
{
margin:20px;
background-color:#6699ff;
}
이런 방식으로 이상적인 여백은 div의 경우 10픽셀, div의 경우 20픽셀이 되어야 합니다. p 태그의 경우 실제로 여백은 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 문제는 해결되었습니다. 다음 장에서는 버그 캡처에 대한 기본 지식에 대해 이야기하겠습니다.

2. 버그 격리 문제

다음으로 문제를 격리해야 합니다. 문제를 분리하고 증상을 식별함으로써 문제의 원인을 파악하고 해결할 수 있습니다. 문제를 격리하는 한 가지 방법은 관련 요소에 테두리나 윤곽선을 적용하고 어떻게 반응하는지 확인하는 것입니다.

1 #promo1
2 {
3 float:left;
4 여백 -right:5px;
5 테두리:1px 단색 빨간색;
6 }
7 #promo2
8 {
9 float:left;
10 테두리:1px 단색 녹색;
11 }
(저는 일반적으로 나중에 처리하기 쉽도록 페이지에 직접 테두리를 추가하는 것을 좋아합니다.) Firefox 개발자 도구 모음 플러그인의 개요 옵션을 사용하거나 다음 작업에 사용되는 개요를 사용할 수 있습니다. 개요가 추가된 북마크릿 중 하나를 페이지에 추가합니다. 경우에 따라 단순히 테두리를 추가하면 문제가 해결되는데, 이는 종종 문제가 공백 오버레이라는 것을 나타냅니다.

몇 가지 속성을 수정한 후 버그에 영향을 주는지 확인하세요. 그렇다면 어떤 요소인지, 어떤 스타일에 영향을 미치는지 확인해보세요. 예를 들어 두 프레임 사이의 간격이 IE에서 생각하는 것보다 크다면 여백을 늘리고 테스트하여 어떤 일이 일어나는지 확인하세요. 테두리 사이의 간격이 두 배가 되면 IE의 이중 여백 부동 버그가 발생할 수 있습니다.

1 #promo1
2 {
3 부동:왼쪽;
4 여백-오른쪽:40px;
5 테두리:1px 단색 빨간색;
6 }
7 #promo2
8 {
9 float:left;
10 border:1px solid green;
11 }
몇 가지 일반적인 해결 방법을 시도해 보세요. 예를 들어 위치 속성을 상대적으로 설정하거나 표시 속성을 인라인(플로팅 요소에서)으로 설정하거나 너비 또는 높이 속성을 더 크거나 짧게 설정하면 많은 IE 버그를 수정할 수 있습니다. 이렇게 하면 많은 CSS 문제를 찾아 이해하고 수정할 수 있습니다!