What are the CSS IE compatible writing methods?

CSS is a very important part of web design, but in different browsers, CSS compatibility is a very troublesome issue. Especially in IE browser, the problem of CSS compatibility is more prominent. Therefore, you must pay attention to the compatibility of IE browser when writing CSS styles. This article will introduce some commonly used IE compatible writing methods.

1. Common IE browser compatibility issues

In IE browser, common CSS compatibility issues include the following:

1. Box model : IE6 and IE7 do not support the standard box model, but use the IE box model. This results in a discrepancy between the actual width and height of the element and the design width and height when setting width and height.
2. PNG24 image transparency: IE6 does not support the transparency of PNG24 images. You need to use JavaScript to set transparency separately for IE6.
3. Clear floats: IE6 does not support the browser's automatic clearing of floats. You need to use clear:both to manually clear floats.
4. Positioning: IE6 does not support position:fixed, you can use position:absolute to achieve the same effect.

2. Commonly used IE browser-compatible writing methods

1. The picture background is not covered under IE6 browser

In IE6, if If an element has both a background image and a background color set, the background image may not be covered by the background color. At this time, you need to add a _filter attribute to the container element and set its value to "inherit".

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

2. The border is not covered under IE6 browser

In IE6, when two block elements or two inline elements meet, the border will not be covered. coverage situation. At this time, you can solve this problem by setting an empty div.

<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;
}

The above code triggers the hasLayout mechanism of IE browser by setting position:relative and zoom:1, and displays the border by setting an empty div element.

3. Margin overlap problem under IE6 browser

In IE6, when the margin-top and margin-bottom of two adjacent elements overlap, margin overlap will occur. Case. At this time, you can set a padding-top for the above element to avoid margin overlap.

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

.parent{
    padding-top:1px;    
}

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

4. The transparency problem of PNG24 images under IE6

In order to support the transparency of PNG24 images in IE6, you can put a layer of div on the image and place it on this div Add a piece of JavaScript code.

HTML code:

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

CSS code:

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

In the above code, the _behavior attribute can bind JavaScript code to the element and execute it inside it.

5. Implementation of fixed positioning under IE

In the IE browser, the position:fixed attribute cannot be supported, but similar effects can be achieved through 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();

It should be noted that if it is compatible with IE7 and above browsers, DOCTYPE should be set, otherwise IE will render the page in a weird mode, and compatibility issues may occur.

This article summarizes some commonly used CSS IE compatible writing methods, I hope it will be helpful to everyone. In actual projects, we should continue to summarize and explore better IE-compatible writing methods to improve the compatibility and user experience of web pages.

The above is the detailed content of What are the CSS IE compatible writing methods?. For more information, please follow other related articles on the PHP Chinese website!