Question

我有一个用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中工作。

请帮助，谢谢！

Answer 1

尝试添加以下filter属性：

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

根据this resource，这应该一直工作到IE 5.5。

Answer 2

我found a site创建代码并且非常有用且方便。

这是正确的代码：

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（使用SVG）具有完全多站梯度的IE 9代码：

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

/* Code as Above */

Answer 3

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

I've found a nice CSS3 generator that you can use.

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFE80000,EndColorStr=#FF840000);

Answer 4

IE9对CSS3的支持并不像你想象的那么大。虽然它确实支持css3，但它不支持整个规范。 CanIuse.com是查找不同浏览器版本支持的功能的绝佳资源。

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

IE中的CSS按钮

4 个答案: