Thin Spacer CSS 在 IE 8 和 IE 7 中无法正常工作答案

【问题标题】：Thin Spacer CSS not working properly in IE 8 and IE 7Thin Spacer CSS 在 IE 8 和 IE 7 中无法正常工作
【发布时间】：2013-07-12 20:46:18
【问题描述】：

我一直在尝试将 CSS 应用于我拥有的薄垫片。

通常对于 mozilla，我添加的渐变是：

background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);

这在 Mozilla 中看起来像：

对于 IE，我添加了以下代码：

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d5d0',GradientType=0 );

在 IE 中这看起来像：

从上面可以看出，IE中的spacer不是一条粗的连续红线，然而，在mozilla中却是这样。有人可以建议我如何使 IE 中的垫片像 mozilla 一样厚且连续？

编辑：对于面临这个问题的人，我按照 Spudley 的建议使用 CSSPIE3（PIE.js 1.0 版）来克服这个问题。

【问题讨论】：

请注意——这些旧的过滤器属性不是很可靠/很好。直到最近，当我们获得一流的渐变/不透明度等时，才有人真正使用它们。我从未真正部署过它们，因为我一直发现它们还不够好。在过去的 3 年里，我一直在使用这个 bradshawenterprises.com/blog/2010/…。我只是在上面的背景代码之前将它用作背景图像。旧浏览器获取 png，新浏览器获取 CSS。容易:)
@RichBradshaw：谢谢，让我看看。看了你说的东西。没看懂。
另外，我有点想为我提到的代码找到一个解决方案，而不必再次编写所有渐变的东西。谢谢你的信息。

【解决方案1】：

对于旧 IE 中的渐变，没有任何好的解决方案——这只是那些旧浏览器做的不太好。

IE 的旧filter 样式以存在重大错误和怪癖而闻名。正如您所发现的，与它们一起工作真的不是很有趣。

不过，您还有其他几个选择：

您可以只删除旧 IE 版本的渐变。这只是视觉上的精美，不会影响网站的实际功能。好的，所以老 IE 用户可能无法让网站看起来像使用新浏览器的人那样好......嗯，是的，但你知道吗？他们在旧的 IE 版本上，所以现在已经习惯了；他们可以忍受它。

创建一个简单的后备很容易。只需在渐变背景上方的 CSS 中指定一个普通的纯色 background 样式。在有冲突的地方，浏览器将采用他们理解的最后一个，因此现代浏览器将采用渐变，而旧 IE（以及其他旧浏览器，如果有人使用它们）将采用纯色背景。
如果您确实需要渐变，可以尝试使用 CSS3Pie 库。这是一个小的 Javascript 库，它尝试向旧 IE 版本添加一些标准 CSS 功能，包括 CSS 渐变。它通过使用 VML 图形而不是 filter 样式在内部工作，这意味着您不会遇到 filter 导致的错误，因此在这种情况下它可能比您拥有的更好。

希望对您有所帮助。

【讨论】：

非常感谢这个，我会试试这个，看看它是否会给我带来积极的结果。
不用担心。希望能帮助到你。我认为选项 1 是务实的方法。但是如果你有一个老板坚持他的网站必须在所有浏览器中看起来都一样，并且不能理解旧浏览器不那么好的概念，那么选项 2 (CSS3Pie) 可能会节省你的培根（它确实为几年前我在那个圆角位置时的我）。
非常感谢这个。它真的有帮助。我选择了第二个选项。深表赞赏。投赞成票并接受。这让我大开眼界。再次感谢。
顺便说一句，只是出于好奇：是否有任何 CDN 可以让我直接加载 PIE.js 而不是下载它并在我的本地引用它？
@TheDarkKnight - 我不知道任何 CDN，但是当谈到 IE 的 behavior 风格时，这是 PIE 用来发挥魔力的，通常最好在本地引用它们，因为如果您尝试跨域使用它们，您可能会出现问题。我不认为这同样适用于 PIE.js（即纯 JS 版本）；但我一直使用.htc 版本，所以我不太确定。好消息是 PIE 只需要加载旧版本的 IE，因此大多数访问者永远不会下载它；这意味着即使它在您的服务器上，也不会对您的带宽造成太大负担。