1

当我尝试在IE中使用渐变和边框半径来设置按钮的样式时，我发现由于渐变应用于背景，所以角实际上是方形的。

所有其他浏览器似乎都能够毫无问题地处理这个问题。

如果您在 FireFox 中打开它，我已经在这里演示了这 一点，例如，如果您在 Internet Explorer 中打开它，您会看到圆角和包含在边框内的渐变。

显然我夸大了半径等以使效果清晰。使用以下 CSS：

.form_Wrapper{
    width: 250px;
    height: 250px;
    background-color: #32b1d2;
}

.form_Submit{
    /*positioning*/
    position: absolute;
    top: 100px;
    margin-left: 16px;
    margin-top:20px;
    padding: 3px 10px;
    width: 90px;height:40px;
    /*background*/
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#a5a5a5), to(#808080));
    background: -webkit-linear-gradient(top, #a5a5a5, #808080);
    background: -moz-linear-gradient(top, #a5a5a5, #808080);
    background: -ms-linear-gradient(#a5a5a5, #808080);
    background: -o-linear-gradient(#a5a5a5, #808080);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5a5a5', endColorstr='#808080');
    zoom: 1;
    /*border*/
    border: 2px solid #a5a5a5;
    border-color: #a2a2a2;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /*text*/    
    opacity: 1.0;        
    color: #fff;
}
​

将渐变应用于边框内的区域而不是包含背景必须有一些技巧。但我一直无法研究解决这个问题。

4

3 回答 3

3

-ms-linear-gradient不会做任何事情，因为 IE 直接从 IE9 中的专有过滤器跳到linear-gradientIE10 中的标准。

专有过滤器的行为与背景并不完全相同，它只是对整个元素进行操作，而不必与其他 CSS 属性交互。

CSSPIE 为缺乏 CSS 支持提供了 VML（类似于 SVG）解决方法。如果您最终在很多元素上使用它，使用它可能会降低性能。

您也可以使用图像，但维护会变得混乱。想要改变颜色？您必须重新创建图像。并且最终用户每次更改时都需要重新下载图像文件。它可能很小，但它是一个明显的闪烁。

要点：最简单、最干净、最少拔毛的解决方案是为不兼容 CSS3 的浏览器提供备用纯色。如果人们想要 MS 所说的“更漂亮的网络”，他们会使用本身支持它的浏览器，而不是需要这些 hack 的浏览器。

于 2012-11-22T15:56:50.057 回答
1

问题似乎并不在于它是背景渐变，而特别是您使用过滤器来做到这一点。过滤器是一个专有的 IE css 属性，可以实现相同的效果，但它的行为不像背景。

不幸的是，IE 仅支持 IE10 及更高版本（源代码）中的渐变，因此您要么必须使用图像（有效，但不如 CSS 酷）或CSS3pie（有时很难开始工作，但它的工作很好！）。

为了查看一个工作示例，我在http://denkeensna.nl上使用了 CSS3 饼图，它在 IE 甚至 IE7 中都可以很好地处理渐变 + 边框半径。

于 2012-11-22T15:37:00.463 回答
0

我建议创建背景图像并让图像成为背景，而不是制作 CSS 渐变。这样，您将在每个浏览器上获得相同的背景。您甚至可以使图像的边框变圆（并且角透明，将其另存为.png），这样圆角在 < IE8 中可见

制作：

  • 1 或 2 像素宽度的图像，然后水平重复，
  • 或整个按钮的图像（可能有圆角）
于 2012-11-22T15:31:30.507 回答