css ie writing method

CSS is an indispensable part of our web design and development process. Whether it is beautifying the page, layout or achieving dynamic effects, CSS is inseparable. However, different browsers have different levels of support for CSS. The most common and famous one is that IE browser has insufficient support for CSS, resulting in poor display effects of many pages under IE browser. Therefore, we need to understand how to write CSS under IE browser to ensure that the effect of the web page can be well displayed in each browser.

1. Reasons why IE browser has insufficient support for CSS

IE browser is much slower than other browsers in implementing CSS. The main reasons are as follows:

1. Incomplete box model: Previous versions of IE7 used a layout method called the IE box model, which was different from the standard box model, resulting in different display effects of the same piece of code in different browsers.

2. CSS parsing is not standard: IE browser’s CSS parsing engine does not fully comply with W3C standards. Some CSS properties are not supported by IE, and the use of some CSS selectors is also restricted.

3. Conflict between JS and CSS: The rendering of JavaScript and CSS in IE browser run on the same thread. When JS runs stuck, it will cause CSS to not be rendered in time, affecting the page display effect.

2. Commonly used CSS writing methods in IE browser

In order to achieve the same effect in IE browser as in other mainstream browsers, we can use the following CSS writing method:

1. Hack writing method

Hack writing method refers to the technical means of judging a specific browser version through conditional comment statements, so as to implement different styles or fix browser bugs for a specific browser. .

For example:

This code indicates that the ie6.css style sheet is only loaded in the IE6 browser. In the same way, different browser versions such as IE7 and IE8 can be judged through corresponding conditional statements, and different style settings can be made.

2. zoom attribute

zoom is a CSS property only used in IE browser, used to achieve the zoom-in and zoom-out effect of page elements.

For example:

div {
    zoom: 1;
}

This code means to enlarge the div element. The specific magnification factor and effect can be adjusted according to the actual situation.

3. filter attribute

Filter is a CSS property unique to IE browser, which can achieve blur effects, grayscale effects, transparency effects, etc. of images.

For example:

#imgBox {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

This code means to set the transparency of the element with id imgBox to 50%, where alpha represents the filter attribute of IE browser, and opacity is the standard CSS3 attribute.

4. display:inline-block attribute

display:inline-block attribute has good compatibility under other browsers, but it does not work in IE6 and IE7 Supported, it can be solved by writing as follows:

For example:

.block {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Among them, '*display: inline' means that it only takes effect in IE6 and IE7 browsers, achieving compatibility.

5. position:relative attribute

The effect of position:relative in other browsers is basically the same as that in IE browser, but in IE6, the element under the absolute attribute will Stacked together, it can be repaired by the following writing:

For example:

.box {
    position: relative;
    _position: absolute;
    *left: 0;
    *top: 0;
}

where *position: absolute means that it only takes effect in the IE6 browser, achieving a compatible effect.

3. Summary

Through the above introduction, we can see that IE browser’s support for CSS is not perfect, but through some hack techniques or specific CSS writing methods, it can be compared with other Browser has the same effect. After understanding some of the characteristics and compatibility issues of IE browser, we can better design and develop web pages and achieve better display effects.

The above is the detailed content of css ie writing method. For more information, please follow other related articles on the PHP Chinese website!