[分享]css兼容ie浏览器写法

CSS 是网页开发中重要的一环，但在不同浏览器上的兼容性问题也是困扰大家的问题。尤其是在 Internet Explorer（以下简称IE）浏览器上，经常会出现页面展示效果与其他浏览器不同的情况。本文...

CSS 是网页开发中重要的一环，但在不同浏览器上的兼容性问题也是困扰大家的问题。尤其是在 Internet Explorer（以下简称IE）浏览器上，经常会出现页面展示效果与其他浏览器不同的情况。本文将介绍一些 CSS 在 IE 浏览器上的兼容写法。

首先，需要注意的是在 CSS 代码中要避免使用 CSS3 新特性和未被所有浏览器支持的属性。例如常见的 border-radius 属性，可以使用 IE 浏览器支持的 VML（Vector Markup Language）来实现圆角效果。

border-radius: 10px; /* 常规写法 */
behavior: url(border-radius.htc); /* IE 浏览器圆角效果写法 */ 

另外，IE 浏览器对盒模型的解析也与其他浏览器有所不同。在 IE7 及以下版本中，使用传统的盒模型，而在 IE8 及以上版本中，可以通过设置 box-sizing: border-box; 来使用 W3C 标准盒模型。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #ccc;
  /* 传统盒模型 */
  width: expression(this.offsetWidth - parseInt(this.currentStyle.paddingLeft) 
  - parseInt(this.currentStyle.paddingRight) - parseInt(this.currentStyle.borderLeftWidth) 
  - parseInt(this.currentStyle.borderRightWidth) + "px"); 
  height: expression(this.offsetHeight - parseInt(this.currentStyle.paddingTop) 
  - parseInt(this.currentStyle.paddingBottom) - parseInt(this.currentStyle.borderTopWidth) 
  - parseInt(this.currentStyle.borderBottomWidth) + "px");
}

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #ccc;
  /* W3C标准盒模型 */
  box-sizing: border-box; 
} 

还有一些其他的兼容写法，例如 IE 浏览器对于 transparent 的处理、动态加载 CSS 文件时需要使用 link 标签等等。在使用 CSS 编写页面时，应注意浏览器兼容性问题，以保证页面能在不同浏览器上正常展示。