오버플로가 발생하는 이유: 숨김; 위치 작업 중지: 상대; IE6과 IE7에서?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

오버플로가 발생하는 이유: 숨김; 위치 작업 중지: 상대; IE6과 IE7에서?

Nov 03, 2024 pm 05:52 PM

Why Does overflow: hidden; Stop Working with position: relative; in IE6 and IE7?

IE6 IE7 CSS 오버플로 문제: 숨김; - 위치: 상대; 콤보

jQuery를 활용하여 이미지, 해당 제목, 티저를 탐색하는 홈페이지 슬라이더를 만들려고 시도하던 중 개발자는 난감한 문제에 직면했습니다. 슬라이더가 다른 브라우저에서는 원활하게 작동했지만 IE6 및 IE7에서는 특히 Overflow: Hidden;을 사용하여 비활성 슬라이드를 숨기는 것과 관련하여 오작동했습니다.

문제가 있는 코드를 정확히 찾아내기 위해 격리된 HTML 페이지를 꼼꼼하게 다시 만들었습니다.

<code class="html">&lt;style&gt;
  ul {
    position: relative;
  }

  .item-list {
    overflow: hidden;
    width: 499px;
  }
&lt;/style&gt;</code>

로그인 후 복사

철저한 조사 결과 범인은 '직위 : 친족'인 것으로 밝혀졌습니다. <ul> 요소. IE6 및 IE7에서는 이 속성으로 인해 Overflow: Hidden; 효과가 없게 됩니다. 그러나 이 속성을 제거하면 <ul> 요소를 슬라이드 콘텐츠에 추가하세요.

해결책:

문제를 해결하려면 개발자에게 position:relative;를 추가하는 것이 좋습니다. 대신 컨테이너 요소에. 이 경우에는 <div> <body> 바로 아래에 있습니다. 앞서 언급한 스타일을 지정합니다. 이 수정으로 충돌이 효과적으로 해결되어 슬라이더가 다른 브라우저의 기능을 손상시키지 않고 IE6 및 IE7에서 올바르게 작동할 수 있게 되었습니다.

위 내용은 오버플로가 발생하는 이유: 숨김; 위치 작업 중지: 상대; IE6과 IE7에서?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.