在IE7/8中模拟CSS3 border-radius和box-shadow

我正在为一个小型Web应用程序开发HTML; 该设计需要一个带圆角和阴影的内容区域.我已经能够用CSS3制作它,它在Firefox和Chrome上运行完美:

但是,Internet Explorer 7和8(不支持CSS3)是一个不同的故事:

是否有一个简单,轻量级的JavaScript解决方案,允许我1)使用特定于IE的功能来实现这一点,或者2)以这样的方式修改DOM(以编程方式),在内容区域周围添加自定义图像以模拟效果？

1> NakedBrunch..：

---

看看这篇文章:http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

它涵盖了IE7/8中CSS3的特殊圆角和框阴影.

---

我认为VML解决方案可能就是这样.看一下htc文件中的代码,它可以缩小并加速一点.

2> Braxo..：

---

这是我的方法,我使用条件将CSS文件定位到IE浏览器.

假设您的div为id #page_container.在常规的master.css或css3.css文件中,您可以使用样式为其指定宽度,高度,圆角和阴影.

现在,当IE点击您的页面时,它将拉入您设置的条件css.对于同一个div#page_container,你可以改变宽度,高度,可能是一些填充,然后给它一个背景图像,使它看起来像阴影,圆角版本.

所以你的头脑会这样:

在master.css文件中,您将拥有主div的这个定义:

div#page_container {
  width: 960px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background: #ccc;
  drop-shadow: whatever...
  rounded-corner: whatever...
}

现在,在你的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;
}

添加足够的额外填充,以使阴影适合您的背景图像.因为它会向下级联,它会覆盖你原来的10px填充,扩展盒子模型以适应你额外的阴影图形.

这种方法的好处包括:

只有IE才会看到此定义和对图像的调用.如果这是一个高容量的应用程序,这将节省带宽和与呼叫相关的任何延迟.

同样,因为您没有在每个浏览器看到的圆角图形中进行硬编码,所以Firefox和Safari用户不需要使用额外的图像调用来访问服务器.

无需添加另一个检查IE的javascript插件,创建新的标记,时间等...

---

这可能是作者的方式,但我认为一些插件(特别是pie.htc)已经走了很长一段路,值得一看.这种方法浪费了开发时间,为那些正在失去市场份额的浏览器剪切图像,而不是包含一个在IE6-8中工作的解决方案(如pie.htc),而且操作简单,麻烦.我自己抵制插件很长一段时间,但它们现在已经成为了阿森纳中一个非常宝贵的工具.

3> meo..：

---

首先,我想提到没有完美的解决方案,直到IE9,CSS边界半径将被实现.

以下是您在此之前的不同解决方案:

您可以使用许多模拟圆角的JS脚本中的一个.但它们都没有正确实现阴影.这是我尝试的脚本列表和我的结论.所有这些脚本都有一些共同之处,它们在HTML中添加了其他元素,以便为您提供圆角的错觉.

DD Roundies:这个脚本非常轻巧,效果很好.它可以在没有任何框架的情况下工作,并且可以与jQuery和Prototype一起使用(我认为它与其他人一起工作得很好,但我无法确定).它在支持CSS3的浏览器上使用CSS3属性.并使用与IE所有其他人相同的黑客攻击.对这个的反击是非常好的. 编辑我必须在这里纠正自己.这个适用于HTC文件.它不会在HTML中添加其他元素.

Curvy Corners和jQuery Plugin Curvy Corners:我喜欢这个.antialiazing工作非常好.它与背景图像很好玩.但它与CSS3阴影效果不佳.它不会检查您的浏览器是否支持CSS3并始终使用向您的dom添加元素的丑陋解决方案.

漂亮的角落和jquery角落:两者都有不好的反击,角落看起来非常前卫.jQuery角落处理背景图像有困难.

这就是为什么在我看来它们都不是一个合适的解决方案:

弯曲的角落dom搞乱截图http://meodai.ch/stackoverflow/curvy.png 弯曲的dom混乱

俏皮的混乱http://meodai.ch/stackoverflow/nifty.png 俏皮的混乱

还有其他几个,但我认为在这个地方没有提及.

正如您所看到的,他们正在为您的dom添加许多元素.如果要为大量元素添加圆角,这可能会造成麻烦.它可以使一些旧的浏览器/计算机崩溃.对于阴影,它几乎是同样的问题.有一个jQuery插件可以处理盒子和字体上的阴影:http: //dropshadow.webvex.limebits.com/

我的结论是:如果我正在做一个小预算工作,IE用户只有边缘而没有阴影.如果客户有一些钱可以花,所以我只用CSS做它,我为每个角落制作图像.如果他们绝对必须在那里,但没有时间或没有钱去做,我使用一个提到的JS Scripts DD_roundies优先.现在取决于你.

PS:IE用户习惯于丑陋的界面,他们不会发现角落和阴影无论如何都会丢失:P

---

'PS'的+1加上我认为如果不存在较新/较冷的功能,应该允许CSS优雅降级.我也认为IE用户应该受到一点点痛苦,但这只是我的报复... =)

---

也为PS +1.不能同意更多.IE是所有Web开发人员的祸根.

4> CTarczon..：

---

这是刚刚发布,它是在测试阶段,但检查出来:http://css3pie.com/

5> MikeM..：

---

我已经开始使用此处的.htc脚本: 对Internet Explorer 6,7和8的CSS3支持

这是我见过的最简单的IE3 + 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 */
}

6> Tim..：

---

我一直在使用CSS3PIE,这很容易实现,只需添加一个行为:url(pie.htc); 到css标签,你很高兴..为你做的一切,还包括对边框图像,渐变,盒子阴影,rgba和其他一些的支持......来源是:http:// css3pie.com/