css - Bottom border only uses background image with gradient in Internet Explorer 7 -
i'm trying design div tag has linear gradient on bottom give fade effect.
i've been able on chrome, internet explorer 10, firefox, etc, using css below.
i used filter , progid internet explorer 7 gives whole div background , not bottom or top.
i think because, unfortunately, internet explorer 7 doesn't read css background-sizeproperty.
does know way of getting line position @ bottom of 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 looks in chrome, ff etc.</div> </body> </html>
this isn't ie7 bug ie7 not having modern browser features. unsurprising given how old is.
the filter styles you're using usual way of doing gradients in ie7, it's absolutely non-standard, , can't expected work in same way. they're external components weren't designed web, being fudged ie via activex. it's not great.
you've got few choices on how deal this:
accept ie7 doesn't support gradients, , give plain background fall-back.
accept ie7 can use
filtergradients, they're not good.use javascript polyfill such css3pie better job of drawing gradients
filterstyle.
i'll focus on last option, suspect it's 1 you're going want use. css3pie hacks ie's css parsing in order allow support (near) standard css gradients (and other features).
the thing makes better filter style uses ie's vml graphics language render these gradients. more flexible filter, , allow kind of complex gradients you're after. there limitations, in general, results much better using filter gradients.
it has advantage of using standard css syntax, makes easier write , maintain.
the down-side is javascript library, , have potential slow site down if over-use it. haven't had problem this, key keep use of library (and polyfills in general) minimum; use them makes real difference site, , fall-back option isn't enough.
hope helps.
Comments
Post a Comment