html - How to force modern Internet Explorer to show proper gradient background in real web sites -
body background defined in inline css as
body { background: radial-gradient( #eac39f, rgb(255, 208, 160),#cb690c); } in real web sites latest net explorer shows horizontal lines in background.
in ie developer tools turned other styles in body off, tried 2-color gradient, linear gradient , other colors, problem persists.
how forcefulness ie show background without horizontal lines ?
chrome shows proper background. net explorer shows proper background if style used. page
<html> <head> <style type="text/css"> body { background: radial-gradient( #eac39f, #cb690c); } </style> </head><html><body></body></html> is shown properly. if there more elements in page, horizontal lines appear. how remove lines in net explorer ? jquery , jquery-ui used in page.
since ie not apply height body, either apply fixed height body or apply 100% heightto html tag in css,
and if don't need background repeat, apply, background-repeat:no-repeat.
also if looking cross-browser back upwards should utilize vendors browsers.
here snippet working in ie10+:
class="snippet-code-css lang-css prettyprint-override">html { height: 100% } body { background: rgba(234, 195, 159, 1); /* old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%); /* ff3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(234, 195, 159, 1)), color-stop(100%, rgba(203, 104, 12, 1))); /* chrome, safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%); /* chrome10+,safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%); /* opera 11.10+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%); /* ie 10+ */ background: radial-gradient(ellipse @ center, rgba(234, 195, 159, 1) 0%, rgba(203, 104, 12, 1) 100%); /* w3c */ filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#eac39f', endcolorstr='#cb680c', gradienttype=1); /* ie6-9 fallback on horizontal gradient */ background-repeat: no-repeat }
html css css3 internet-explorer radial-gradients
No comments:
Post a Comment