我正在尝试设计一个底部具有线性渐变的 div 标签，以赋予其淡入淡出效果。
我已经能够使用下面的 CSS 在 Chrome、Internet Explorer 10、Firefox 等上这样做。
我使用了 Internet Explorer 7 的过滤器和 progId，但它为整个 div 提供了背景，而不仅仅是底部或顶部。
我认为这是因为，不幸的是，Internet Explorer 7 不读取 CSS background-size 属性。
有谁知道如何让线条定位在 div 标签的底部？
<!DOCTYPE html>
<html>
<head>
<style>
div
{
padding:20px 40px;
overflow: hidden;
background-image: linear-gradient(90deg, #000, #FFF, #000), linear-gradient(90deg, #000, #FFF, #000);
background-image: -webkit-linear-gradient(90deg, #000, #FFF, #000), -webkit-linear-gradient(90deg, #000, #FFF, #000);
background-image: -webkit-gradient(linear, 90deg, #000, #FFF, #000), -webkit-gradient(90deg, #000, #FFF, #000);
background-image: -moz-linear-gradient(90deg, #000, #FFF, #000), -moz-linear-gradient(90deg, #000, #FFF, #000);
background-image: -o-linear-gradient(90deg, #000, #FFF, #000), -o-linear-gradient(90deg, #000, #FFF, #000);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
background-size: 100% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
width: 100%;
background-color: #111111;
color:#ffffff;
}
</style>
</head>
<body bgcolor="#111111;">
<div>Example of what it looks like in Chrome, FF etc.</div>
</body>
</html>
最佳答案
这与其说是 IE7 错误，不如说是 IE7 没有现代浏览器功能。考虑到它的年龄，这真的不足为奇。
您正在使用的 filter 样式是在 IE7 中执行渐变的常用方法，但它绝对是非标准的，并且不能期望以相同的方式工作。它们是最初不是为网络设计的外部组件，通过 activeX 被混入 IE。这不是很好。
关于如何处理这个问题，您有几个选择:
接受 IE7 并不真正支持渐变的事实，并给它一个纯色背景作为后备。
接受 IE7 可以使用
filter渐变，但它们不是很好。使用 javascript polyfill，例如 CSS3Pie与
filter样式相比，它在绘制渐变方面做得更好。
我将重点介绍最后一个选项，因为我怀疑这是您要使用的选项。 CSS3Pie 侵入 IE 的 CSS 解析，以使其支持(接近)标准 CSS 渐变(和其他功能)。
它比 filter 风格更好的地方在于它使用 IE 的 VML 图形语言来呈现这些渐变。这比 filter 灵活得多，并且允许您使用复杂的渐变。有一些限制，但总的来说，结果比对渐变使用 filter 好得多。
它还具有使用标准 CSS 语法的优势，这使得编写和维护变得更加容易。
唯一的缺点是它是一个 javascript 库，如果您过度使用它，它确实有可能减慢您的网站速度。我没有遇到过这个问题，但关键是要将你对这个库(和一般的 polyfills)的使用保持在最低限度；在对您的网站产生真正影响的地方以及后备选项不够好的地方使用它们。
希望对您有所帮助。
关于css - 底部边框仅在 Internet Explorer 7 中使用带渐变的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18268638/