CSS IE9边框半径和背景渐变溢出

在本文中，我们将介绍CSS中IE9浏览器的两个常见问题：边框半径和背景渐变的溢出问题。

阅读更多：CSS 教程

边框半径溢出问题

边框半径（border-radius）是CSS中常用的样式属性之一，用于设置元素的圆角。然而，在IE9浏览器中，边框半径的设置会导致溢出的问题，即圆角会超出元素的实际区域。这是因为IE9不支持border-radius属性。

解决方法

为了解决IE9中边框半径溢出的问题，我们可以使用CSS3 Pie这个开源的JavaScript库。CSS3 Pie可以让IE9浏览器支持许多CSS3属性，包括border-radius。

首先，我们需要在HTML文档中引入CSS3 Pie的脚本文件，并指定Pie.htc文件的路径。然后，为需要添加边框半径的元素添加一个类名，比如”rounded”。接下来，在CSS样式表中，使用.border-radius类名来定义元素的边框半径样式，并且使用behavior属性将CSS3 Pie应用到相应的元素上：

.rounded {
  behavior: url(path/to/PIE.htc);
}

.border-radius {
  border-radius: 5px;
}

这样，就可以在IE9浏览器中正常显示边框半径了。

背景渐变溢出问题

背景渐变（background gradient）是CSS中实现渐变效果的一种方式。然而，在IE9浏览器中，使用背景渐变时会出现溢出问题，即渐变的颜色会超出元素的实际区域。

解决方法

为了解决IE9中背景渐变溢出的问题，我们可以使用IE滤镜（filter）来实现背景渐变效果。

首先，我们需要为需要应用背景渐变的元素添加一个类名，比如”gradient”。然后，在CSS样式表中，使用gradient类名来定义元素的背景渐变样式，并利用filter属性设置IE滤镜：

.gradient {
  background: #1e5799; /* Fallback color for non-IE9 browsers */
  background: -webkit-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* Chrome 10+, Safari 5.1+ */
  background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* Firefox 3.6+ */
  background: -ms-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* IE10+ */
  background: -o-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* Opera 11.10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); /* IE 6-9 fallback on horizontal gradient */
}

这样，我们可以在IE9浏览器中正常显示背景渐变。