꼭 알아야 할 CSS 버그와 해결 방법

많은 프로그래밍 언어에 비해 CSS는 배우기 매우 쉬운 언어입니다. 구문은 간단하고 명확하며 표현적 특성으로 인해 개발자는 복잡한 논리를 다룰 필요가 없습니다. 그러나 다른 브라우저에서 코드를 테스트할 때 어려움이 발생합니다. 브라우저 버그가 다른 방식으로 표시되는 이유는 대부분의 CSS 개발자가 직면한 주요 문제입니다. 디자인이 한 브라우저에서는 멋져 보일 수 있지만 다른 브라우저에서는 레이아웃이 깨져 보일 수 있습니다.

"CSS는 제어하기 어렵다"는 오해는 언어 자체에서 비롯되는 것이 아니라 모든 주요 브라우저에서 사이트가 제대로 작동하도록 하기 위해 필요한 일련의 조치에서 비롯됩니다. 아래에서는 버그가 발생하는 몇 가지 상황에 대해 설명합니다.

1. 버그를 잡는 방법

우리 모두는 브라우저에 버그가 있고 일부 브라우저에는 다른 브라우저보다 버그가 더 많다는 것을 알고 있습니다. CSS 개발자가 자신의 코드에서 문제에 직면하면 일부 사람들은 오류를 브라우저 버그로 비난하고 적절한 조치를 취할 것입니다. 사실, 모두가 버그를 과장하고 있으며, 버그는 사람들이 말하는 것만큼 흔하지 않습니다. 가장 일반적인 CSS 문제는 브라우저 버그가 아니라 CSS 사양에 대한 불완전한 이해로 인해 발생합니다.

많은 개발자가 독학을 통해 효과에 대한 자신만의 정신적 모델을 구축합니다. 무언가가 기대에 미치지 못할 때 그들은 브라우저를 범인으로 지목합니다. 이런 문제를 피하기 위해서는 CSS 버그를 다룰 때 어딘가에 실수가 있었다고 가정하고 의심스러운 부분을 가지고 코드를 확인하면서 자연스럽게 각 코드를 찾아내는 것이 가장 좋습니다. 구문 오류가 계속 개선되고 있습니다. 정말 찾을 수 없다면 브라우저 버그인지 생각해 보세요.

일반적인 CSS 문제

가장 간단한 CSS 문제 중 일부는 코드의 입력 및 구문 오류로 인해 발생합니다. 이 버그를 방지하는 가장 좋은 방법은 CSS 유효성 검사기(ttp://jigsaw.w3.org/css-validator/)를 통해 코드를 실행하는 것입니다. 그러면 모든 구문 오류를 찾아 각 오류에 대한 줄과 간단한 설명이 표시됩니다.

하지만 체커는 자동 검사 도구일 뿐이며 완전히 신뢰할 수는 없다는 점도 기억하세요. 이는 검사기의 버그이기도 한 여러분을 놀라게 할 오류를 보고할 수 있지만, 보고하는 오류가 실제 오류인지 여부를 알 수 있어야 합니다.

1. 특이성 및 분류 순서의 문제

문법 오류 외에도 가장 흔히 발생하는 문제 중 하나는 특이성 및 분류 순서의 설계입니다. 요소에 규칙을 적용했는데 효과가 없는 경우 특정성 문제가 발생하는 경우가 많습니다. 다른 규칙을 적용하면 제대로 작동하지만 일부 규칙은 작동하지 않아 매우 짜증스럽습니다. 예:

다음 코드에서 주황색을 표시하고 싶지만 원래는 투명하게 작성되었으므로 규칙을 사용하세요.

#content p{background-color:transparent;}
.intro{background-color:#feeca9}

브라우저에서 테스트해도 여전히 transparent 로 표시됩니다. 이는 콘텐츠 p를 선택하는 것이 intor의 선택기보다 더 구체적이기 때문입니다. 이 경우 이를 처리하는 가장 좋은 방법은 intor 단락 선택기 시작 부분에 콘텐츠 요소의 ID를 추가하는 것입니다:

#content p{background-color: transparent;}
#content .intro{background-color: #feeca9;}

I 이 글을 먼저 쓰고 있는데, 잠시 밖에 나가고 싶어요.

이전 장에서 "특수성과 분류 순서의 문제"에 대해 이야기를 마쳤습니다. 이제

2. 공백 가장자리가 겹치는 문제

에 대해 이야기해 보겠습니다.

공백 가장자리 오버레이는 오해할 경우 많은 문제를 일으킬 수 있는 또 다른 CSS 특성입니다. 예를 들어 보겠습니다.

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

p 상자는 10픽셀 여백을 설정합니다.

#box{margin:10px;background-color:#d5d5d5;}
p{margin:20px;background-color:#6699ff;}

이런 식으로 이상적인 p 여백은 10픽셀이어야 하고 p 태그는 20픽셀을 생성합니다. 실제로 p의 10픽셀 마진만 생성되고 p 태그는 왼쪽과 오른쪽에 20픽셀의 마진만 나타나며 p의 위쪽과 아래쪽에는 마진이 생성되지 않습니다.

이는 두 가지 이유 때문에 발생합니다. 첫째, 단락의 위쪽 및 아래쪽 여백 20픽셀이 p의 10픽셀과 겹쳐서 단일 20픽셀 세로 여백을 형성합니다. 둘째, 이러한 공백 가장자리는 p로 둘러싸여 있지 않지만 p의 위쪽 및 아래쪽 가장자리를 넘어 돌출됩니다. 이는 하위 요소의 높이가 요소에 의해 계산되기 때문에 발생합니다. 요소에 세로 테두리나 패딩이 없는 경우 해당 요소의 높이는 포함된 하위 요소의 위쪽 및 아래쪽 테두리 가장자리 사이의 거리입니다. 따라서 포함하는 하위 요소의 위쪽 및 아래쪽 여백이 컨테이너 요소 외부로 돌출됩니다. 그러나 간단한 해결책이 있습니다. 수직 테두리 또는 패딩을 추가하면 공백이 더 이상 겹치지 않으며 요소의 높이는 포함된 하위 요소의 위쪽 및 아래쪽 공백 가장자리 사이의 거리입니다. 코드는 다음과 같습니다.

#box{margin:10px;padding:1px;background-color:#d5d5d5;}
p{margin:20px;background-color:#6699ff;}

ok 문제가 해결되었습니다. 다음 장에서는 버그 캡처에 대한 기본 지식에 대해 이야기하겠습니다.

2. 버그 격리 문제

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

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问题，从而达到对其了解和修复它们！

위 내용은 꼭 알아야 할 CSS 버그와 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!