CSS 在 IE7/8 中模拟 CSS3 border-radius 和 box-shadow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2687804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Emulating CSS3 border-radius and box-shadow in IE7/8
提问by Adam Maras
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:
我正在为一个小型 Web 应用程序编写 HTML；该设计需要一个带有圆角和阴影的内容区域。我已经能够使用 CSS3 生成它，并且它在 Firefox 和 Chrome 上完美运行：
However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story:
但是，Internet Explorer 7 和 8（不支持 CSS3）是另一回事：
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?
是否有一个简单、轻量级的 JavaScript 解决方案可以让我1）使用特定于 IE 的功能来实现这一点，或者 2）以这样一种方式修改 DOM（以编程方式），在内容区域周围添加自定义图像以模拟效果?
采纳答案by Braxo
This is my method, I use the conditionals to target CSS files to IE browsers.
这是我的方法，我使用条件将 CSS 文件定位到 IE 浏览器。
Say you have your divwith 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.
假设您的div的 id 为 #page_container。在您的常规 master.css 或 css3.css 文件中，您可以为其指定宽度、高度、圆角和带样式的阴影。
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.
现在，当 IE 访问您的页面时，它会拉入您设置的条件 css。对于同一个 div#page_container，你可以稍微改变宽度、高度，或者一些填充，然后给它一个背景图像，使它看起来像阴影，圆角版本。
So your headwill have this:
所以你的头会有这个：
<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>
In the master.css file, you would have this definition for your main div:
在 master.css 文件中，您的主 div 将具有以下定义：
div#page_container {
width: 960px;
height: auto;
padding: 10px 10px 10px 10px;
background: #ccc;
drop-shadow: whatever...
rounded-corner: whatever...
}
Now, in your ie.css file, and because it is referenced in your second, the definition will cascadedown so you can alter it a bit:
现在，在您的 ie.css 文件中，并且因为它在您的第二个文件中被引用，因此定义将向下级联，因此您可以稍微更改它：
div#page_container {
width: 960px;
height: auto;
padding: 15px 15px 15px 15px; /* this is key */
background: #ccc url(/path/to/image.file) no-repeat top left;
}
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.
添加足够的额外填充，以便阴影适合您的背景图像。因为它向下级联，它将覆盖您原来的 10px 填充，扩展框模型以适应您额外的阴影图形。
Couple benefits to this method include:
这种方法的几个好处包括：
- Only IE will see this definition and the call to the image. If this is a high volume app, that will save on bandwidth and any delays associated with the call.
- Likewise, because you didn't hard code in the rounded corner graphics that every browser would see, your Firefox and Safari users won't need hit the server with extra image calls.
- No need to add in yet another javascript plug-in that checks for IE, creates new markup, time, etc...
- 只有 IE 会看到这个定义和对图像的调用。如果这是一个高容量的应用程序，这将节省带宽和与呼叫相关的任何延迟。
- 同样，因为您没有在每个浏览器都会看到的圆角图形中进行硬编码，您的 Firefox 和 Safari 用户将不需要通过额外的图像调用来访问服务器。
- 无需添加另一个检查 IE、创建新标记、时间等的 javascript 插件......
回答by NakedBrunch
Check out this post: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
看看这篇文章：http: //www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
It covers specifically rounded corners and box shadow for CSS3 in IE7/8.
它专门涵盖了 IE7/8 中 CSS3 的圆角和框阴影。
回答by meo
First of all I like to mention that there is no perfect solution for this until IE9, where the CSS border-radius is gonna be implemented.
首先我想提一下，在 IE9 之前没有完美的解决方案，在那里将实现 CSS border-radius。
Here are the different solutions you have until then:
以下是您在此之前拥有的不同解决方案：
You could use one of many JS scripts that simulates rounded corners. But none of them implement the shadow properly. Here is the list of the scripts i tried and my conclusions. All of this scripts have something in common, they are placing additional elements in your HTML to give you the illusion of rounded corners.
您可以使用许多模拟圆角的 JS 脚本之一。但是他们都没有正确实现阴影。这是我尝试过的脚本列表和我的结论。所有这些脚本都有一些共同点，它们在你的 HTML 中放置了额外的元素，给你圆角的错觉。
DD Roundies: This script is very lightweight an works pretty well. It works without any framework and plays nice with jQuery & Prototype (i assume its working well with the others to, but i can't tell for sure). It uses the CSS3 proprieties on browsers who support CSS3. And uses the same hack as all the others for IE. The antialiazing on this one works very good. editi have to correct my self here. This one works with a HTC File. It does not placing additional elements in your HTML.
Curvy Cornersand the jQuery Plugin Curvy Corners:I like this one to. The antialiazing is working very good to. And it plays nice with background images. But it does not play nice with CSS3 shadows. It does not check if your Browser support CSS3 and always uses the ugly solution of adding elements to your dom.
- Nifty Corners& jquery Corner:Both have a bad antialiazing and the corners look very edgy. jQuery corners has trouble to handle background images.
DD Roundies：这个脚本非常轻量级，效果很好。它在没有任何框架的情况下工作，并且与 jQuery 和 Prototype 配合得很好（我认为它与其他人一起工作得很好，但我不能肯定）。它在支持 CSS3 的浏览器上使用 CSS3 属性。并使用与其他所有 IE 相同的 hack。这个抗锯齿效果非常好。 编辑我必须在这里纠正我的自我。这个适用于 HTC 文件。它不会在您的 HTML 中放置额外的元素。
Curvy Corners和jQuery 插件 Curvy Corners：我喜欢这个。抗锯齿效果很好。它与背景图像搭配得很好。但它与 CSS3 阴影效果不佳。它不会检查您的浏览器是否支持 CSS3，并且总是使用向 dom 添加元素的丑陋解决方案。
- Nifty Corners& jquery Corner：两者的抗锯齿效果都很差，而且边角看起来很前卫。jQuery 角处理背景图像有困难。
Here is the reason why none of them is a proper solution in my opinion:
以下是我认为它们都不是正确解决方案的原因：
curvy corners dom messing screenshot http://meodai.ch/stackoverflow/curvy.pngcurvy dom mess
弯曲的角落 dom 乱七八糟的截图 http://meodai.ch/stackoverflow/curvy.png弯曲的 dom 乱七八糟
nifty dom mess http://meodai.ch/stackoverflow/nifty.pngnifty dom mess
漂亮的 dom 混乱 http://meodai.ch/stackoverflow/nifty.png漂亮的 dom 混乱
There are a few other but i think they are not mentionable at this place.
还有其他一些，但我认为在这个地方它们不值得一提。
As you can see they are adding a lot of elements to your dom. This can cause trouble if you want to add rounded corners to a huge amount of elements. It can make some older browser / computers crash. For the shadows its pretty much the same problem. There is a jQuery plugin that handles shadows on boxes and fonts: http://dropshadow.webvex.limebits.com/
正如你所看到的，他们正在向你的 dom 添加很多元素。如果您想为大量元素添加圆角，这可能会导致麻烦。它可能会使一些较旧的浏览器/计算机崩溃。对于阴影，它几乎是相同的问题。有一个 jQuery 插件可以处理框和字体上的阴影：http: //dropshadow.webvex.limebits.com/
My conclusion: If i am doing a small budget job, IE users just have edges and no shadows. If the client has some money to spend, so i am doing it with CSS only and i make images for every corner. If they absolutely have to be there but there is no time or no money to do it, i use one of the mentioned JS Scripts DD_roundies with preference. Now its up to you.
我的结论：如果我做的是一个小预算的工作，IE 用户只会有边缘而没有阴影。如果客户有一些钱可以花，所以我只用 CSS 来做，我为每个角落制作图像。如果他们绝对必须在那里但没有时间或没有钱去做，我会优先使用提到的 JS 脚本 DD_roundies 之一。现在由你决定。
PS: IE users are used to ugly interfaces, they don't gonna see that the corners and shadows are missing anyway :P
PS：IE 用户习惯了丑陋的界面，他们无论如何都不会看到角落和阴影丢失了 :P
回答by CTarczon
It was just released and it's in beta but check it out: http://css3pie.com/
它刚刚发布并且处于测试阶段，但请查看：http: //css3pie.com/
回答by MikeM
I've started using the .htc script found here: CSS3 support for Internet Explorer 6, 7, and 8
我已开始使用此处找到的 .htc 脚本： CSS3 support for Internet Explorer 6, 7, and 8
It's the simplest implementation of CSS3 for IE6+ that I've seen.
这是我见过的 IE6+ 的最简单的 CSS3 实现。
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
回答by Tim
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/
我一直在用CSS3PIE，实现起来很简单，只需要添加一个behavior:url(pie.htc); 到 css 标签，你很高兴.. 为你做这一切，还包括对边框图像、渐变、框阴影、rgba 和其他一些的支持......来源是：http:// css3pie.com/
回答by Luca Filosofi
for drop-shadow in IE use:
对于 IE 中的阴影使用：
.shadow {
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}
for round corners use DD_roundiesas mentioned below, just 9Kbis a good compromise for have round corner in a second! ;-)
对于圆角，请使用下面提到的 DD_roundies，只需9Kb就可以在一秒钟内获得圆角！;-)
of course for programmatically IE-specific featuresuse conditional comments! ;-)
当然是programmatically IE-specific features使用条件注释！;-)
回答by Joberror
To allow graceful degradation I bet you should use this script called CssUserAgent from http://www.cssuseragent.org/
为了允许优雅的降级，我敢打赌你应该使用来自http://www.cssuseragent.org/ 的名为 CssUserAgent 的脚本
回答by Esko
Nifty Corners Cubeproduces nice results and is supposed to be downwards compatible all the way to IE5.5.
Nifty Corners Cube产生了不错的结果，并且应该一直向下兼容到 IE5.5。
回答by rcravens
There is a jquery plugin that modifies the DOM to produce rounded corners. Check it out here:
有一个 jquery 插件可以修改 DOM 以生成圆角。在这里查看：
http://blue-anvil.com/jquerycurvycorners/test.html
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.
在 IE、Chrome 和 FF 中为我呈现了示例页面。使用 Firebug，您可以看到该插件引入了一堆 1px x 1px 的 div 来创建效果。
