html - Stylized HR is not showing properly in IE -
i created <hr> tag , it's not showing in internet explorer. here it's css:
hr { clear: both; border: 0; height: 1px; background: transparent; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); } and here jsfiddle http://jsfiddle.net/nc6ya/. how can fix in ie looks it's supossed do?
thanks.
you jsfiddle in fact work fine in ie10. doesn't work in ie9 or earlier because versions of ie not support css gradients.
there few solutions available you:
use polyfill script such css3pie add support css gradients older ie versions. say, css3pie best script available works pretty seamlessly , works in ie versions ie6 ie9.
use ie's proprietary
-ms-filterstyle.-ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#444444', endcolorstr='#999999')";it's not pretty job (albeit known bugs). note above example copied elsewhere; you'll need tweak requirements. there number of gradient generator tools right syntax ie. try this one example.
if need support ie7 or ie6, you'll need specify both
filter,-ms-filtersyntax variants. ie8 / ie9 support need-ms-filtersyntax.personally, i'd prefer polyfill option above rather filter, because it's neater -- you're using standard css code -- , because avoids couple of nasty little quirks in filter style best avoided.
and of course, final option let old ie versions go without gradient. provide suitable solid background them fall-back, , forget it. it's nice support old ie users possible, if it's not going make noticeable difference usability of site, it's not worth effort. should decided on case-by-case basis; it's best give support, other times isn't. it's decide in specific case.
hope helps.
finally, 1 other thing suggest add css line unprefixed version of gradient style:
background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); if you're specifying prefixed styles, should specify equivalent unprefixed version well, because once browser supports standard, remove support prefixed version, means if haven't specified standard, can break code in future versions. not good.
Comments
Post a Comment