How to be compatible with ie css

In modern web design, the latest HTML and CSS technologies are basically used. However, in the actual development environment, it is often necessary to be compatible with old browsers. The most troublesome one is to be compatible with IE browser. . IE (Internet Explorer) browser is a web browser developed by Microsoft. Although it has been abandoned by Microsoft, it is still widely used by many corporate companies and individual users. In order for web pages to run normally on IE browser, we need to be compatible with IE CSS.

1. Issues with IE CSS

When it comes to browser compatibility, IE CSS has become one of the most important issues. The rendering method of CSS by IE browser is very different from that of other browsers. The biggest problem is that IE browser's insufficient support for CSS3 attributes, such as rounded corners, etc. When writing CSS styles, if you use some newer CSS3 properties without considering the compatibility of IE browser, problems such as style confusion and abnormal display will occur in IE browser, affecting the user experience.

2. Common IE CSS compatibility issues

1. Box-sizing issue

Box-sizing is a new attribute of CSS3, used to set the box model of elements . In standard browsers, box-sizing defaults to content-box, while in IE, box-sizing defaults to border-box, that is, the width of the box model includes border and padding. If we do not explicitly set the box model in the style sheet, style display exceptions will occur.

Solution: In order to avoid this problem, we need to explicitly set the box model of the element in the style sheet, for example, use box-sizing: border-box;.

2. Floating problem

In IE browser, floating elements will have different rendering effects, and there will be some problems during rendering. For example, floating elements will cause the height of the parent element to be 0, causing problems such as overlapping elements.

Solution: You can use overflow: hidden; or clear: both; on floating elements to avoid these problems.

3. Transparency issue

In IE, the opacity attribute is only supported in IE9 and above, but not in IE8 and below. If we use the opacity attribute in the style sheet, it will be invalid in IE8 and below.

Solution: You can use filter: alpha(opacity=100); in the style sheet instead of the opacity attribute.

4. Vertical centering problem

In IE, the method of achieving vertical centering is different from other modern browsers. In IE, we need to set the display attribute of the parent element to table-cell, but in other modern browsers, we can directly use flex layout to achieve vertical centering.

Solution: Add display: table-cell; and vertical-align: middle; to the parent element to achieve vertical centering.

5. Font problem

In IE, the compatibility problem of Chinese fonts is more prominent, because different browsers have great differences in rendering Chinese fonts. In IE, if we do not set a font, the Chinese Songti font will be used by default.

Solution: Use the font-family attribute in the style sheet to explicitly specify the order of Chinese and English fonts, for example, font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Roboto, sans-serif ;.

3. Use CSS hack appropriately

CSS hack is a method used to solve the compatibility problem of CSS in different browsers. Common CSS hacks include conditional comments, selector priority, attribute prefixes, etc.

1. Conditional comment

Conditional comment is a comment method that only takes effect in IE browser. When IE browser renders HTML, it will ignore the content outside the conditional comments and only render the content within the conditional comments.

2 , Selector priority

On the same element, different selectors have different priorities. Styles that reference different selectors will be prioritized in the following order. In IE, we can use the characteristics of selector priority to implement conditional styles.

1. !important declared attributes
2. The style attribute on the tag
3. ID selector
4. Class selector, attribute selector, pseudo class Selector
5. Label selector, pseudo-element selector

3, attribute prefix

Some CSS attributes have different prefixes in different browsers, such as the Transform attribute In IE, you need to add the -ms- prefix. In the style sheet, we need to use attribute prefixes to ensure the compatibility of styles in different browsers.

Solution: You can use tools such as autoprefixer to help automatically add CSS property prefixes.

4. Use the CSS framework

The CSS framework is a rapid development tool that includes various browser compatibility processing methods. In actual development, we can use various commonly used CSS frameworks, such as Bootstrap, Foundation, etc.

These frameworks include a variety of commonly used CSS classes, which can quickly help us complete style development. In addition, these frameworks also take into account various browser compatibility issues and can help us complete web page development faster.

5. Summary

IE CSS compatibility is an issue that cannot be ignored in daily development. It is a wise choice to use conditional comments, selector priorities, attribute prefixes, CSS frameworks and other methods to solve compatibility issues in different browsers. When designing web pages, we should try to avoid using some new CSS3 properties and styles, and focus on IE compatibility to improve the user's browsing experience.

The above is the detailed content of How to be compatible with ie css. For more information, please follow other related articles on the PHP Chinese website!