Question

有什么解决方案可以在firefox 3.5及更低版本中获得CSS Gradient的支持吗？

http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/

Answer 1

虽然本文“Cross-Browser CSS Gradient”解释了如何在所有浏览器中使用css3渐变功能，但它仍然仅限于FireFox 3.6 +。

因此2006年List Apart“Super-Easy Blendy Backgrounds”中的这篇旧文章可能会提供一种替代方案（但不适用于您可能需要的所有用例）

CSS3将实现一个background-size属性，但由于CSS3的ETA值为never，因此现在没有任何帮助。那我们该怎么办？好吧，我们使用可扩展的东西，比如img元素。我们可以使用img元素，而不是使用背景来显示PNG混合，并将宽度和高度设置为100％。

test

，使用CSS：

<style type="text/css">.grad img {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.box {
  border: solid orange 2px;
  float: left;
  margin: 1px;
  position: relative;
  width: 165px;
  padding: 5px;
}
.box * {
  margin: 0px;
  position: relative;
  z-index: 1;
}
* html .grad {
  filter: progid:DXImageTransform.Microsoft.AlphaImage »
Loader (src='grad_white.png', sizingMethod='scale');
}
* html .grad img {
  display: none;
}
* html .box {
    position:static;
}
.blue { 
  background-color: #2382a1; 
}
.green { 
  background-color: #4be22d; 
}
.pink { 
  background-color: #ff009d;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.box {
  border: solid red 2px;
  height:2.5em;
}
</style>
<![endif]-->

和标记：

<div class="box grad blue">
  <img src="grad_white.png" alt="blur gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>

</div>
<div class="box grad pink">
  <img src="grad_white.png" alt="pink gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>

<div class="box grad green">
  <img src="grad_white.png" alt="green gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>

Answer 2

我强烈建议您只使用BG图像。我知道每个人都迫不及待地开始使用所有最新的CSS3功能，但我们都要等待主要浏览器采用CSS3的这些部分（这将在CSS3到达W3C之前发生）推荐）。

使用特定于供应商的扩展程序是一种不好的做法，IMO似乎是对没有人关心Web标准和Web开发人员的时代的回顾，只是编写了一个浏览器（以及俗气的 Designed for IE 按钮），或者必须以多种方式编写相同的代码来支持不同的浏览器。所有主流浏览器现在都支持PNG alpha层透明度。因此强制使用CSS生成渐变几乎没有什么优势。它只引入了不必要的代码冗余。

如果你仍然没有使用BG图像，那么唯一的选择就是使用JavaScript。这是应该在Firefox 3及更高版本中运行的脚本，甚至可能是Firefox 2：JavaScript Gradient Roundrects。

代码看起来像：

var style = {
    'gradient-start-color': 0x99ddff,
    'gradient-end-color': 0xffffff,
    'border-radius': 1
};
OSGradient.applyGradient(style, $('#Disp')[0]);

但这仍然是一种迂回的方式，可以通过简单的1x50px PNG图像获得结果。

是否有任何解决方案可以在Firefox 3.5及更低版本中获得CSS Gradient的支持？

2 个答案: