CSS의 IE 브라우저에서 가장 기본적인 버그 및 솔루션 중 일부

CSS의 버그를 해결하는 방법은 무엇입니까? IE 브라우저에서 CSS를 접한 많은 친구들이 이런 질문을 할 것이라고 믿습니다. 이 장에서는 CSS의 IE 브라우저에서 가장 기본적인 버그와 솔루션을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. IE6 이중 여백 버그

페이지의 요소가 부동을 사용하여 왼쪽이나 오른쪽으로 부동하는 경우 요소에 여백 픽셀이 있는 한 값이 곱해집니다. 2 로, 예를 들어 "margin-left:10px" IE6에서 이 값은 20px로 구문 분석됩니다. 이 BUG를 해결하려면 요소에 display:inline 또는 display:block을 추가하고 해당 요소 유형을 명확히 하여 이중 여백 BUG를 해결해야 합니다.

2. IE6의 3픽셀 문제 및 해결 방법

float를 사용하여 요소를 부동화하면 해당 요소와 인접 요소 사이에 3px 간격이 생성됩니다. 이상한 점은 오른쪽 컨테이너의 높이가 설정되지 않은 경우 3px 간격이 인접한 컨테이너 내부에 있다는 점입니다. 높이를 설정하면 컨테이너 반대쪽으로 이동합니다. 이런 버그를 해결하려면 같은 행에 배치된 모든 요소에 float를 추가해야 합니다.

3. IE6의 홀수 너비 및 높이 BUG

IE6의 홀수 높이 및 너비 표시 크기와 짝수 높이 및 너비의 표시 크기에는 일정한 차이가 있습니다. 주요 문제는 이상한 높이와 너비입니다. 이러한 문제를 해결하려면 외부에 배치된 div의 높이와 너비를 짝수로 작성해 보세요.

4. IE6에서는 사진 링크 아래에 공백이 있습니다.

IE6에서는 그림 아래에 일정한 공백이 있습니다. 특히 그림이 그림 옆에 세로로 놓여 있는 경우 이러한 공백을 볼 수 있습니다. 이러한 문제를 해결하려면 img 태그를 display:block으로 정의하거나 Vertical-align에 해당하는 속성을 정의해야 합니다. img.5에 해당하는 스타일에 대해 글꼴 크기:0

을 작성할 수도 있습니다. IE6에서 빈 요소의 높이는 BUG

입니다. 요소에 콘텐츠가 없으면 이에 대해 0-19px가 설정됩니다. 스타일의 요소는 공간의 높이입니다. 이 요소의 높이는 항상 19px입니다.

4가지 해결 방법이 있습니다:

1. 추가: Overflow:hidden

2. 요소에 html 주석을 삽입합니다:

3 요소에 html을 삽입합니다. 공백 문자:  

4. 요소의 CSS에 글꼴 크기:0

을 추가합니다. 6. 반복되는 텍스트의 BUG

좀 더 복잡한 레이아웃에서는 때때로 부동 요소의 마지막 문자가 투명 요소 아래에 표시됩니다.

해결책은 다음과 같습니다.

1. 모든 요소에 display:inline

2이 있는지 확인하세요. 마지막 요소에 "margin-right:-3px"를 사용하세요.

3. 마지막 항목에 조건부 주석을 추가하세요.

특정 버그는 요소의 상위 요소의 z-index가 1로 설정되면 하위 요소의 z-index가 유효하지 않고 해당 수준이 상위 요소의 설정을 상속한다는 것입니다.

결론: 실제로 IE6의 많은 BUG 솔루션은 display:inline,font-size:0 및 float를 사용하여 해결할 수 있습니다. 따라서 코드를 작성할 때 한 번 기억해야 합니다. float가 사용됩니다. 요소에 display:inline 스타일을 추가하면 부동으로 인한 스타일 혼란을 효과적으로 방지할 수 있습니다. 빈 DIV를 사용할 때 높이가 레이아웃의 아름다움에 영향을 주지 않도록 하려면 글꼴 크기를 추가할 수도 있습니다. 위 내용은 IE 브라우저의 가장 기본적인 버그와 해당 솔루션에 대한 소개입니다.

CSS 비디오 튜토리얼

에 대해 자세히 알고 싶으시면 주의하세요. PHP 중국어 웹사이트

위 내용은 CSS의 IE 브라우저에서 가장 기본적인 버그 및 솔루션 중 일부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!