{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 家丑人穷心不美 的问题《Emulating CSS3 border-radius and box-shadow in IE7》','https://www.manongdao.com/q-40589.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I've been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome:
However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story:
Is there an easy, lightweight JavaScript solution that would allow me to either 1) use IE-specific features to achieve this, or 2) modify the DOM (programmatically) in such a way that adds custom images around the content area to emulate the effect?
Nifty Corners Cube produces nice results and is supposed to be downwards compatible all the way to IE5.5.
This is my method, I use the conditionals to target CSS files to IE browsers.
Say you have your div with the id #page_container. In your regular master.css or css3.css file, you would give it your width, height, rounded corners and drop shadow with styles.
Now, when IE hits your page, it will pull in the condition css you had set up. For that same div#page_container, you may alter the width a bit, height, maybe some padding, then give it a background-image to make it look like the drop shadow, rounded-corner version.
So your head will have this:
In the master.css file, you would have this definition for your main div:
Now, in your ie.css file, and because it is referenced in your second, the definition will cascade down so you can alter it a bit:
Add just enough extra padding so the drop shadows fit in with your background-image. Because it cascades down, it will overwrite the original 10px padding you had, expanding the box model to fit in your extra shadow graphics.
Couple benefits to this method include:
for drop-shadow in IE use:
for round corners use DD_roundies as mentioned below, just 9Kb is a good compromise for have round corner in a second! ;-)
of course for
programmatically IE-specific featuresuse conditional comments! ;-)To allow graceful degradation I bet you should use this script called CssUserAgent from http://www.cssuseragent.org/
I have been using CSS3PIE, which is pretty easy to implement, just add a behavior:url(pie.htc); to the css tag and you're good to go.. does it all for you, also includes support for border-image, gradients, box-shadow, rgba and a few others... the source is at: http://css3pie.com/
There is a jquery plugin that modifies the DOM to produce rounded corners. Check it out here:
http://blue-anvil.com/jquerycurvycorners/test.html
There example page rendered for me in IE, Chrome and FF. Using Firebug you can see that the plugin introduces a bunch of 1px by 1px divs that create the effect.