CSS 즉 호환 가능한 작성 방법

CSS는 웹 디자인에 있어 매우 중요한 부분이지만, 다양한 브라우저에서의 CSS 호환성은 매우 골치 아픈 문제입니다. 특히 IE 브라우저에서는 CSS 호환성 문제가 더욱 두드러집니다. 따라서 CSS 스타일을 작성할 때 IE 브라우저의 호환성에 주의해야 합니다. 이 기사에서는 일반적으로 사용되는 IE 호환 작성 방법을 소개합니다.

1. 일반적인 IE 브라우저 호환성 문제

IE 브라우저에서 일반적인 CSS 호환성 문제는 다음과 같습니다.

1. Box 모델: IE6 및 IE7은 표준 상자 모델을 지원하지 않지만 IE 상자 모델을 채택하므로 실제 문제가 발생합니다. 너비, 높이 설정 시 요소의 너비, 높이가 디자인된 너비, 높이와 다르게 설정됩니다.
2. PNG24 이미지 투명도: IE6은 PNG24 이미지의 투명도를 지원하지 않습니다. IE6의 투명도를 별도로 설정하려면 JavaScript를 사용해야 합니다.
3. 부동산 지우기: IE6은 브라우저의 부동 소수점 자동 지우기를 지원하지 않습니다. 수동으로 부동소수점을 지우려면 clear:both를 사용해야 합니다.
4. 위치 지정: IE6은 위치:고정을 지원하지 않습니다. 위치:절대를 사용하여 동일한 효과를 얻을 수 있습니다.

2. 일반적으로 사용되는 IE 브라우저 호환 작성 방법

1. 그림의 배경은 IE6 브라우저에서 다루지 않습니다.

IE6에서는 요소에 배경 이미지와 배경 색상이 모두 설정된 경우 배경 이미지가 적용됩니다. 색상 적용 범위가 아닙니다. 이때 컨테이너 요소에 _filter 속성을 추가하고 그 값을 "inherit"로 설정해야 합니다.

<code>.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}</code>

2. IE6 브라우저에서는 테두리가 가려지지 않습니다

IE6에서는 두 개의 블록 요소 또는 두 개의 인라인 요소가 만나면 테두리가 가려지지 않습니다. 이때 빈 div를 설정하면 이 문제를 해결할 수 있습니다.

<code><div class="box">
    <div class="inner"></div>
</div>

.box{
    background:#fff;
    border:1px solid #ccc;
    position:relative;
    zoom:1;
}
.inner{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}</code>

위 코드는 위치:상대적 및 확대/축소:1을 설정하여 IE 브라우저의 hasLayout 메커니즘을 트리거하고 빈 div 요소를 설정하여 테두리를 표시합니다.

3. IE6 브라우저에서 여백 겹침 문제

IE6에서는 인접한 두 요소의 margin-top과 margin-bottom이 겹칠 때 여백 겹침이 발생합니다. 이때, 위 요소에 padding-top을 설정하여 여백이 겹치는 것을 방지할 수 있습니다.

<code><div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}</code>

4. IE6에서 PNG24 이미지의 투명도 문제

IE6에서 PNG24 이미지의 투명성을 지원하려면 이미지에 div 레이어를 배치하고 div에 JavaScript 코드 조각을 추가하면 됩니다.

HTML 코드:

<code><div class="png">
    <img src="images/logo_bg.png" />
</div></code>

CSS 코드:

<code>div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
        }(this)
    );
}</code>

위 코드에서 _behavior 속성은 JavaScript 코드를 요소에 바인딩하고 그 안에서 실행할 수 있습니다.

5. IE에서 고정 위치 구현

IE 브라우저에서는 position:fixed 속성을 지원할 수 없지만 JavaScript를 통해 유사한 효과를 얻을 수 있습니다.

JavaScript 코드:

<code>function fixedPosition() {
    var obj = document.getElementById("fixed_obj");
    var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
    obj.style.top = top + "px";
}

window.onscroll = fixedPosition;

//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();</code>

IE7 이상 브라우저와 호환되는 경우 DOCTYPE을 설정해야 합니다. 그렇지 않으면 IE가 페이지를 이상한 모드로 렌더링하여 호환성 문제가 발생할 수 있습니다.

이 글은 일반적으로 사용되는 CSS IE 호환 작성 방법을 요약한 것입니다. 모든 사람에게 도움이 되기를 바랍니다. 실제 프로젝트에서는 웹 페이지의 호환성과 사용자 경험을 향상시키기 위해 더 나은 IE 호환 작성 방법을 계속해서 요약하고 탐색해야 합니다.

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