html - Thin Spacer CSS 在 IE 8 和 IE 7 中无法正常工作

Question

我一直在尝试将 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 版）来克服这个问题。

score 2 · Accepted Answer

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

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

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

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

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

希望有帮助。

1 回答 1