css compatible ie writing method

CSS is one of the important skills in front-end development, but different browsers may have different parsing and support for CSS. Especially in IE browser, this difference is more obvious. In order to ensure that the website displays correctly in IE browser, we need to understand the compatibility issues of CSS in IE. This article will share some common CSS writing methods that are compatible with IE to help developers overcome this problem.

1. Selector compatibility issues

IE has problems supporting certain CSS selectors. For example, the pseudo-class selector nth-child() in CSS3 cannot be parsed correctly in IE7 and below; in addition, in IE 6 and below, it does not support the use of " " and "~" selectors to select items of the same level. element. Therefore, in order to display correctly in IE, you can use JavaScript to achieve these selector effects, or use fallback selectors in CSS.

Example:

/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
  margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
  padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }

2. Width percentage compatibility issue

In IE6, when the width of an element is set in percentage, if the width of its parent element is If the width is also set in percentage, the width of the element may be abnormal. To solve this problem, you can set "display:inline-block" on the parent element and then set its width to 100%.

Example:

/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
  /* 在IE6中,需要在父元素上设置display:inline-block */
  display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
}

3. Absolute positioning compatibility issue

In IE, the positioning of absolutely positioned elements is not always relative to the closest element to it. Position the parent element, possibly relative to the body element. To solve this problem, you can set "position:relative" on the parent element.

Example:

/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

4. Clear floating compatibility issues

In IE, floating elements do not force the parent element to occupy a height, which will cause many layout problems . Therefore, we need to clear the float. A common way is to add an empty element at the end of the parent element and set it to "clear:both", but this method does not always work in IE. There are several ways to solve this problem, one of which is to add "overflow:hidden" to the parent element of the floated element, which will force it to occupy the height.

Example:

/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
  overflow: hidden;
  zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
  float: left;
  width: 50%;
}

5. Background transparency compatibility issue

In IE, if a background is set for an element and transparency (opacity) is set, The element's text and sub-elements will also be made transparent. In order to solve this problem, you can use IE's unique filter method to add transparency.

Example:

/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
  background-color: #000;
  opacity: 0.5;
  /* 在IE中，使用滤镜来添加透明度 */
  filter: alpha(opacity=50);
}

6. Border model compatibility issue

IE6 and below versions use the "IE box model", which is different from the W3C specification. This means that when you set the width of an element in IE, its actual width will be larger than the value calculated directly by calculating the sum of the border, padding, and content widths. To handle borders correctly in IE, you can use a hack in CSS or a special calculation in JavaScript.

Example:

/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
  width: 400px;
  height: 300px;
  padding: 10px;
  /* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
  border: 1px solid #000;
  background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
  width: 422px;
  height: 322px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

7. Link background color compatibility issue

In IE, when setting the background color for a link, if the link is active status or visited status, the background color will not take effect. To solve this problem, you can manually add active and visited styles to the link.

Example:

/* 在IE中设置链接背景色需要同时设置活动和已访问状态，否则会失效 */
a {
  background-color: #f00;
}
a:visited,
a:hover,
a:active {
  background-color: #f00;
}

Summary

The above is the common way of writing CSS that is compatible with IE. Of course, we may encounter more compatibility issues in practice, which require continuous testing and attempts to resolve. The process of being compatible with IE may be cumbersome, but this is one of the skills we at least need to understand and master, because in reality, IE browser still has a certain market share, especially in some old enterprise environments.

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