0

我正在尝试设计一个底部具有线性渐变的 div 标签，以使其具有淡入淡出效果。

我已经能够使用下面的 CSS 在 Chrome、Internet Explorer 10、Firefox 等上执行此操作。

我为 Internet Explorer 7 使用了过滤器和 progId，但它为整个 div 提供了背景，而不仅仅是底部或顶部。

我认为这是因为不幸的是，Internet Explorer 7 不读取 CSSbackground-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>
4

1 回答 1

1

这与其说是 IE7 错误，不如说是 IE7 没有现代浏览器功能。考虑到它的年龄，这并不奇怪。

您使用的filter样式是在 IE7 中进行渐变的常用方式，但它绝对是非标准的，并且不能期望以相同的方式工作。它们是最初不是为 Web 设计的外部组件，通过 activeX 被添加到 IE 中。这不是很好。

对于如何处理这个问题，你有几个选择：

  1. 接受 IE7 并不真正支持渐变，并给它一个简单的背景作为后备。

  2. 接受 IE7 可以使用filter渐变，但它们不是很好。

  3. 使用 javascript polyfill，例如CSS3Piefilter ，它在绘制渐变方面比样式做得更好。

我将专注于最后一个选项，因为我怀疑它是您要使用的选项。CSS3Pie 入侵了 IE 的 CSS 解析，以允许它支持（接近）标准 CSS 渐变（和其他功能）。

使它比filter样式更好的地方在于它使用 IE 的 VML 图形语言来渲染这些渐变。这比 灵活得多filter，并且确实允许您追求那种复杂的渐变。有一些限制，但总的来说，结果比用于渐变要好得多。filter

它还具有使用标准 CSS 语法的优点，这使得它更易于编写和维护。

唯一的缺点是它是一个 javascript 库，如果您过度使用它，它确实有可能减慢您的网站速度。我对此没有任何问题，但关键是尽量减少对这个库（以及一般的 polyfills）的使用；在对您的网站产生真正影响的地方以及备用选项不够好的地方使用它们。

希望有帮助。

于 2013-08-16T08:44:37.913 回答