CSS 호환, 즉 작성 방법

CSS는 프런트 엔드 개발에서 중요한 기술 중 하나이지만 브라우저마다 CSS에 대한 구문 분석 및 지원이 다를 수 있습니다. 특히 IE 브라우저에서는 이러한 차이가 더욱 분명해집니다. 웹사이트가 IE 브라우저에서 올바르게 표시되도록 하려면 IE에서의 CSS 호환성 문제를 이해해야 합니다. 이 문서에서는 개발자가 이 문제를 극복하는 데 도움이 되도록 IE와 호환되는 몇 가지 일반적인 CSS 작성 방법을 공유합니다.

1. 선택기 호환성 문제

IE에는 특정 CSS 선택기 지원에 문제가 있습니다. 예를 들어, CSS3의 의사 클래스 선택기 nth-child()는 IE7 이하에서 올바르게 구문 분석될 수 없습니다. 또한 IE 6 이하에서는 "+" 및 "~" 선택기를 사용하여 선택하는 것을 지원하지 않습니다. 같은 수준. 따라서 IE에서 올바르게 표시하려면 JavaScript를 사용하여 이러한 선택기 효과를 얻거나 CSS에서 대체 선택기를 사용할 수 있습니다.

예:

/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
  margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
  padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }

2. 너비 백분율 호환성 문제

IE6에서 요소의 너비가 백분율로 설정된 경우 상위 요소의 너비도 백분율로 설정되면 요소의 너비가 비정상적일 수 있습니다. . 이 문제를 해결하려면 상위 요소에 "display:inline-block"을 설정한 다음 너비를 100%로 설정하면 됩니다.

예:

/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
  /* 在IE6中,需要在父元素上设置display:inline-block */
  display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
}

3. 절대 위치 지정 호환성 문제

IE에서 절대 위치 지정 요소의 위치 지정은 항상 가장 가까운 위치에 있는 상위 요소를 기준으로 하는 것이 아니라 본문 요소를 기준으로 할 수 있습니다. 이 문제를 해결하려면 상위 요소에 "위치:상대적"을 설정하면 됩니다.

예:

/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

4. 부동 호환성 문제 해결

IE에서 부동 요소는 상위 요소가 높이를 차지하도록 강제하지 않으므로 많은 레이아웃 문제가 발생합니다. 그러므로 우리는 플로트를 클리어해야 합니다. 일반적인 방법은 상위 요소 끝에 빈 요소를 추가하고 "clear:both"로 설정하는 것이지만, 이 방법이 IE에서 항상 작동하는 것은 아닙니다. 이 문제를 해결하는 방법에는 여러 가지가 있는데, 그 중 하나는 부동 요소의 상위 요소에 "overflow:hidden"을 추가하여 해당 요소가 높이를 차지하도록 하는 것입니다.

예:

/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
  overflow: hidden;
  zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
  float: left;
  width: 50%;
}

5. 배경 투명도 호환성 문제

IE에서 배경이 설정되고 요소에 투명도(불투명도)가 설정된 경우 요소의 텍스트와 하위 요소도 투명해집니다. 이 문제를 해결하기 위해 IE 고유의 필터 방식을 사용하여 투명성을 추가할 수 있습니다.

예:

/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
  background-color: #000;
  opacity: 0.5;
  /* 在IE中，使用滤镜来添加透明度 */
  filter: alpha(opacity=50);
}

6. Border 모델 호환성 문제

IE6 이하 버전은 W3C 사양과 다른 "IE 박스 모델"을 사용합니다. 즉, IE에서 요소의 너비를 설정하면 테두리, 패딩, 콘텐츠 너비의 합을 직접 계산하여 계산한 값보다 실제 너비가 더 커집니다. IE에서 테두리를 올바르게 처리하려면 CSS의 해킹이나 JavaScript의 특수 계산을 사용할 수 있습니다.

예:

/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
  width: 400px;
  height: 300px;
  padding: 10px;
  /* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
  border: 1px solid #000;
  background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
  width: 422px;
  height: 322px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

7. 링크 배경색 호환성 문제

IE에서 링크의 배경색을 설정할 때 링크가 활성 상태이거나 방문한 경우 배경색이 적용되지 않습니다. 이 문제를 해결하려면 활성 스타일과 방문한 스타일을 링크에 수동으로 추가하면 됩니다.

예:

/* 在IE中设置链接背景色需要同时设置活动和已访问状态，否则会失效 */
a {
  background-color: #f00;
}
a:visited,
a:hover,
a:active {
  background-color: #f00;
}

요약

위는 IE와 호환되는 CSS를 작성하는 일반적인 방법입니다. 물론 실제로는 지속적인 테스트와 해결 시도가 필요한 더 많은 호환성 문제가 발생할 수 있습니다. IE와 호환되는 과정은 번거로울 수 있지만 이는 적어도 우리가 이해하고 숙달해야 하는 기술 중 하나입니다. 실제로 IE 브라우저는 특히 일부 오래된 기업 환경에서 여전히 특정 시장 점유율을 차지하고 있기 때문입니다.

위 내용은 CSS 호환, 즉 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!