2

我有一个用 CSS 创建的按钮，它在 Firefox 和 Chrome 中运行良好，但在 IE 中运行良好......

不知道出了什么问题，但我认为有一些缺失或错误的代码。这是我的代码：

.red-button{ 
 width: 400px;
 height: 100px;
 line-height: 100px;
 color: white;
 text-decoration: none;
 font-size: 20px;
 font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
 font-weight: bold;
 display: block;
 text-align: center;
 position: relative; 
border: 1px double black;
border-radius: 10px;
background-image: -webkit-gradient(linear, center top, center bottom, 
                  from(#e80000),   to(#840000));
background-image: -webkit-linear-gradient(top, #e80000, #840000);
background-image: -moz-linear-gradient(top, #e80000, #840000);
background-image: -o-linear-gradient(top, #e80000, #840000);
background-image: -ms-linear-gradient(top, #e80000, #840000);
background-image: linear-gradient(to bottom, #e80000, #840000);
text-shadow: 1px 1px 1px black;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

我希望它在 IE 9 和 IE 8 中工作。虽然我知道边界半径等属性在 IE 8 中不起作用，但我确实希望渐变在 IE 8 和 9 中起作用。

请帮忙，谢谢！

4

4 回答 4

2

我找到了一个创建代码的网站，非常有用和方便。

这是正确的代码：

background: #e80000; /* Old browsers */
background: -moz-linear-gradient(top, #e80000 0%, #840000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#840000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e80000 0%,#840000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e80000 0%,#840000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e80000 0%,#840000 100%); /* IE10+ */
background: linear-gradient(to bottom, #e80000 0%,#840000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e80000', endColorstr='#840000',GradientType=0 ); /* IE6-9 */

该网站有一个关于 IE 9 的注释：

使用 IE9（使用 SVG）支持完整的多级渐变。

为所有具有渐变的元素添加一个“渐变”类，并将以下覆盖添加到您的 HTML 以完成对 IE9 的支持：

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
      filter: none;
    }
  </style>
<![endif]-->

具有 IE9 的完整多站渐变的 IE 9 代码（使用 SVG）：

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

/* Code as Above */
于 2012-08-21T03:55:42.267 回答
2

尝试添加以下filter属性：

filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', 
          startColorstr=#FFE80000, endColorstr=#FF840000)

根据此资源，这应该一直有效到 IE 5.5 。

于 2012-08-21T03:39:53.607 回答
1

IE9 对 CSS3 的支持并没有你想象的那么好。虽然它确实支持 css3，但它并不支持整个规范。CanIuse.com是了解不同浏览器版本支持哪些功能的绝佳资源。

遗憾的是，IE9 不支持线性渐变，因此您必须使用任一背景图像、选择后备（纯色）、使用过滤器或使用 polyfill。有些人建议使用 Microsoft 过滤器来创建线性渐变，它们确实有效。对于大多数基本网站（即不是很重的动画，想想 jQuery 或成熟的网络应用程序），我建议查看CSS3Pie。它的设置非常简单，允许您编写更干净的 css3 并为您完成所有繁重的工作。此外，它一直支持到 IE6。

于 2012-08-21T03:44:46.597 回答
1

IE8 不支持那些 CSS3 声明，但 IE5 到 IE8 支持 Filter 属性。

我找到了一个不错的 CSS3 生成器，您可以使用它。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFE80000,EndColorStr=#FF840000);
于 2012-08-21T03:37:42.940 回答