브라우저의 CSS 비호환 문제 해결

모든 사람은 브라우저의 비호환성을 싫어해야 합니다. 종종 우리는 단지 문제를 해결하지만 근본 원인을 추적하고 유사한 비호환성이 다시 발생하지 않도록 하는 더 중요한 것을 잊어버립니다.

몇 가지 HTML 코딩 요소를 요약하고 몇 가지 지침을 제공할 수 있기를 바랍니다.
1. 텍스트 자체의 크기가 호환되지 않습니다. 글꼴 크기가 14px인 동일한 Song 스타일 텍스트는 브라우저에 따라 서로 다른 공간을 차지합니다. IE에서는 실제로 높이가 16px, 하단 여백이 3px를 차지합니다. FF에서는 실제로 높이가 17px, 상단이 1px를 차지합니다. 하단에 1px, 흰색 3px, 오페라에서는 더욱 달라집니다. 해결책: 텍스트의 줄 높이를 설정하십시오. 모든 텍스트에 기본 줄 높이 값이 있는지 확인하세요. 이것은 중요합니다. 우리는 1px의 높이 차이를 용납할 수 없습니다.

2. 컨테이너 높이는 ff에서 제한됩니다. 즉, 컨테이너가 높이를 정의한 후에는 컨테이너 테두리의 모양이 결정되고 내용에 따라 확장되지 않습니다. 콘텐츠 및 높이 제한이 유효하지 않습니다. 따라서 컨테이너의 높이를 쉽게 정의하지 마십시오.

3. 콘텐츠가 수평으로 깨지는 문제도 논의했습니다. float 컨테이너에 정의된 너비가 없는 경우 ff 아래의 콘텐츠는 컨테이너 너비를 최대한 늘리는 반면, ie 아래에서는 콘텐츠 래핑에 우선순위가 부여됩니다. 따라서 내용물이 터질 수 있는 부동 컨테이너는 너비를 정의해야 합니다.

작은 실험: 관심이 있으시면 이 실험을 살펴보세요. 다양한 브라우저에서 다음 코드를 각각 테스트해 보세요.


a.

b.

< /p>

c.

d.

위 코드는 브라우저마다 다릅니다. 이 실험은 작은 높이 값 p,

를 사용하는 데서 시작되었습니다. 작은 높이 값은 Overflow:hidden과 함께 사용해야 합니다. 이 실험은 단지 재미를 위한 것입니다. 제가 지적하고 싶은 것은 브라우저마다 컨테이너 경계에 대한 해석이 매우 다르며 컨테이너 콘텐츠의 영향이 다양하다는 것입니다.

4. ff 아래의 플로트를 지우지 않으면 작동하지 않습니다.

모든 사람의 오해를 바로잡기 위해, 비호환성에 직면했을 때 ff가 나쁘다고 말하는 것은 잘못된 것입니다. 사실, 우리를 당황하게 만드는 것은 ie의 이상한 행동일 때가 더 많습니다. 다음은 ie6의 다양한 악행을 나열합니다.

5.가장 싫어하는 이중마진 버그. IE6에서 부동 컨테이너에 대해 margin-left 또는 margin-right를 정의하면 실제 효과는 값의 두 배가 됩니다. 해결책은 부동 컨테이너에 대해 display:inline을 정의하는 것입니다.

6.mirrormargin 버그, 외부 요소에 float 요소가 있을 때 외부 요소가 margin-top:14px를 정의하면 margin-bottom:14px가 자동으로 생성됩니다. IE6의 특징인 패딩에서도 유사한 문제가 발생합니다. 이러한 유형의 버그가 발생하는 상황은 이러한 종류의 발생 조건보다 훨씬 더 복잡하며 체계적으로 분류되지 않았습니다. 해결책: 외부 요소에 테두리 또는 부동 소수점을 설정하십시오.

확장: ff 및 ie 아래 컨테이너의 margin-bottom 및 padding-bottom에 대한 설명이 때때로 일치하지 않는데, 이는 이와 관련된 것으로 보입니다.

7. 공간적 제약으로 삼키는 현상에 대해서는 자세히 설명하지 않겠습니다. 아직 IE6인데 위쪽 p와 아래쪽 p가 2개 있는데, 배경이 없는 아래쪽 p에도 배경이 있는 것으로 나타났습니다. 위의 배경 삼키는 현상에 맞춰 스크롤 시 테두리가 누락되는 현상도 있습니다. 해결 방법: Zoom:1을 사용하세요. 이 확대/축소는 ie6 버그를 해결하기 위해 특별히 설계된 것 같습니다.

8. 댓글도 버그를 일으킬 수 있습니다~~ "An extra pig." 이것은 이전 사람들이 이 버그를 요약하기 위해 사용한 카피입니다. IE6에서는 pig라는 단어가 두 번 나타납니다. 댓글 수에 따라 중복 콘텐츠의 양이 달라집니다. 해결 방법: " picRotate start " 메소드를 사용하여 댓글을 작성하세요.

9.

Riga float

이것은 일반적이고 어려운 호환성 문제이므로 모두가 주의해 주시길 바랍니다. 설명은 약간 이해가 되지만 IE6에서의 설명은 문제의 복잡성으로 인해 혼란을 야기할 수 있습니다. 이 문제에 대해서는 별도의 기사에서 다룰 것입니다. "ul 사용 경험" 기사에 관련 결과가 있지만, 문제를 해결하는 과정은 나와 있지 않습니다.

10. "float:left;display:inline"을 사용하는 ul의 이상한 동작. ie6의 이중 여백 버그에 대한 응답으로 이 CSS가 display:inline에 추가된 것을 볼 수 있습니다. 이는 내 CSS 시스템의 중요한 부분이기도 합니다. "Using Experience of ul" 기사에 설명되어 있습니다. 그리고 이 CSS를 ul에서 사용하면 당신을 비참하게 만들 것입니다. 지금은 그게 다입니다. 여기서는 더 이상 말할 수 없습니다.

위 내용은 브라우저의 CSS 비호환 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!