Bottom border only uses background image with gradient in Internet Explorer 7

StackOverflow https://stackoverflow.com/questions/18268638

题

I'm trying to design a div tag that has a linear gradient on the bottom to give it the fade effect.

I've been able to do so on Chrome, Internet Explorer 10, Firefox, etc, using the CSS below.

I used the filter and progId for Internet Explorer 7 but it gives the whole div the background and not just the bottom or top.

I think it is because, unfortunately, Internet Explorer 7 doesn't read CSS background-sizeproperty.

Does anyone know a way of getting the line to position at the bottom of the div tag?

<!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>
有帮助吗？

解决方案

This isn't so much an IE7 bug as simply IE7 not having modern browser features. Unsurprising really given how old it is.

The filter styles that you're using are the usual way of doing gradients in IE7, but it's absolutely non-standard, and can't be expected to work in the same way. They're external components that weren't originally designed for the web, being fudged into IE via activeX. It's not great.

You've got a few choices on how to deal with this:

  1. Accept that IE7 doesn't really support gradients, and give it a plain background as a fall-back.

  2. Accept that IE7 can use filter gradients, but that they're not very good.

  3. Use a javascript polyfill such as CSS3Pie that does a better job of drawing gradients than the filter style.

I'll focus on this last option, as I suspect it's the one you're going to want to use. CSS3Pie hacks into IE's CSS parsing in order to allow it to support (near) standard CSS gradients (and other features).

The thing that makes it better than the filter style is that it uses IE's VML graphics language to render these gradients. This is much more flexible than filter, and does allow the kind of complex gradients you're after. There are some limitations, but in general, the results are much better than using filter for your gradients.

It also has the advantage of using standard CSS syntax, which makes it much easier to write and maintain.

The only down-side is that it is a javascript library, and it does have the potential to slow your site down if you over-use it. I haven't had a problem with this, but the key is to keep your use of this library (and polyfills in general) to a minimum; use them where it makes a real difference to your site, and where a fall-back option isn't good enough.

Hope that helps.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top