CSS 브라우저 호환 솔루션_CSS/HTML

1. 웹페이지 배경이 반투명입니다
웹페이지 배경이 반투명입니다

복사 코드 코드는 다음과 같습니다.

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; PNG 이미지의 반투명 문제를 해결하기 위한 IE6의 CSS 방법:
#DIVname {
width: 300px;
height: 99px;
background: url('images/top.png') no- 반복 상단;
*배경: 없음;
*filter:progid :DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='template/flower/images/top.png' );
}

2. 클리어 플로팅

코드 복사 코드는 다음과 같습니다:

.clearfix:after{ content:".";clear:both; visible:hidden}
.clearfix{display :inline-block}
.clear{height:0; 글꼴 크기:0; Overflow:hidden; display:block;}
*html .clearfix 1%;}
.clearfix{display:block;}

3. 부동 IE6 이중 여백
1. 부동 요소에는 display:inline을 사용합니다. 🎜>2. IE6의 3px 간격 버그: IE6에서 플로팅 요소 뒤에 텍스트(또는 플로팅 요소가 없는 경우)가 있으면 텍스트와 플로팅 요소 사이에 추가로 3px 간격이 생깁니다. 디스플레이:인라인을 추가하거나 -3px를 디자인하세요. 이 버그를 해결하려면 플로팅 레이어에 간격을 두세요.
3픽셀 간격 버그
div+css의 최소 높이 최소 높이
방법 1:

코드 복사 코드는 다음과 같습니다:

#DIVname {
min-height:150px;
*height:auto!important;
_height:150px;
오버플로: visible;
}

방법 2:

코드 복사 코드는 다음과 같습니다. :

#DIVname {
min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px" :"");
}

5. IE의 Z-인덱스 버그
일반적으로 IE는 상위에 위치 속성이 있지만 Z-인덱스 속성을 제공하지 않는 경우 더 높은 요구 사항을 갖습니다. 기본값은 0이므로 하위 집합에서 z-index 속성이 아무리 높아도 쓸모가 없습니다. 따라서 일반적으로 설명할 수 없는 많은 문제를 해결할 수 있는 z-index 속성을 포함하는 상위 요소에 z-index:1 속성을 제공해야 합니다.

6.IE6 창 크기 조정 버그
본문을 중앙에 배치하고 IE 브라우저의 크기를 변경하면 본문에 상대적으로 배치된 요소가 해결됩니다. 신체에 대한 위치:상대적을 정의하는 것입니다.
7. 텍스트 크기와 줄 높이가 호환되지 않습니다
같은 크기, 같은 글꼴의 경우 브라우저마다 줄 높이와 크기가 다르기 때문에 줄 높이를 설정해야 합니다. .
8. 미러 마진 버그
IE6에서는 외부 요소에 float 요소가 있을 때 외부 요소가 margin-top:5px를 정의하면 margin-bottom:5px가 자동으로 적용됩니다. 생성되면 패딩에서도 비슷한 문제가 발생합니다. 해결 방법은 외부 요소에 테두리나 부동을 설정하는 것입니다.
9. img 아래의 공백
html에는

를 보면 이미지 하단이 컨테이너 하단과 가깝지 않은 것을 알 수 있는데, 이는 img 뒤의 공백 문자로 인해 발생합니다.

다음 두 태그는 서로 옆에 있어야 합니다. 이 버그는 IE7에도 여전히 존재합니다. 해결 방법은 다음과 같습니다: display:block.

10. 그림과 텍스트가 조화를 이룬다
img의 정렬에는 text-top, middle, absmiddle 등이 포함된다는 것을 누구나 알고 있습니다. img와 텍스트를 조정하여 만들 수 있습니다. IE와 FF 아래에 정렬됩니다. 일관성을 유지할 수 있다면 어떻게 조정하더라도 만족하지 못할 것입니다. img와 텍스트를 띄우고 여백을 두고 조정하기만 하면 됩니다. 줄 높이가 손실되었습니다.

Text

불행하게도 IE6에서는 한 줄의 텍스트에 대한 줄 높이 효과가 사라집니다. . . , 그 이유는 inline-block 요소와 inline 요소가 함께 작성되기 때문입니다. 해결 방법: img와 텍스트를 모두 부동으로 만듭니다.