模拟CSS3边框

 

我正在为一个小型Web应用程序开发HTML; 该设计要求具有圆角和阴影的内容区域。 我已经能够用CSS3制作这个，并且它在Firefox和Chrome上运行得非常完美：

CSS3版本

但是，Internet Explorer 7和8（不支持CSS3）则是另一回事：

Internet Explorer版本

有没有一种简单轻量级的JavaScript解决方案，可以让我1）使用特定于IE的功能来实现这一点，或2）以一种在内容区域周围添加定制图像来模拟效果的方式修改DOM（以编程方式） ？

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

假设你的id为#page_container。 在您的常规master.css或css3.css文件中，您可以为它指定宽度，高度，圆角和阴影以及样式。

现在，当IE浏览器打到你的页面时，它会引起你设置的css条件。 对于同样的div＃page_container，你可以改变宽度一点，高度，也许一些填充，然后给它一个背景图像，使它看起来像阴影，圆角版本。

所以你的头会有这样的： 

<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>

在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用户不需要通过额外的图像调用来访问服务器。
  • 无需添加另一个JavaScript插件，用于检查IE，创建新的标记，时间等...

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

    它涵盖了IE7 / 8中特定的圆角和CSS3的盒子阴影。

    首先，我想提一下，在IE9中没有完美的解决方案，在那里CSS边界半径将被实现。

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

    您可以使用模拟圆角的许多JS脚本之一。 但是他们都没有正确实施阴影。 这里是我尝试的脚本列表和我的结论。 所有这些脚本都有一些共同之处，他们在HTML中放置了额外的元素，给你一个圆角的幻觉。

  • DD Roundies ：这个脚本非常轻巧，很好用。 它没有任何框架，并与jQuery和原型（我认为它与其他人很好地工作，但我无法确定）很好地工作。 它在支持CSS3的浏览器上使用CSS3属性。 并使用与其他IE浏览器相同的方法。 在这一个antialiazing工程非常好。 编辑我必须在这里纠正我的自我。 这一个与HTC文件一起工作。 它不会在HTML中放置其他元素。

  • Curvy Corners和jQuery Plugin Curvy Corners：我喜欢这个。 antialiazing工作非常好。 它可以很好地处理背景图像。 但它对CSS3阴影不太好。 它不检查你的浏览器是否支持CSS3，并且总是使用向你的dom添加元素的丑陋解决方案。

  • 漂亮的角落和jquery角落：两个都有一个糟糕的antialiazing和角落看起来非常前卫。 jQuery的角落处理背景图片很麻烦。

    • 在我看来，这就是为什么它们都不是合适的解决方案：

    弯曲的角落dom messing截图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

    链接地址: http://www.djcxy.com/p/41993.html

    上一篇: Emulating CSS3 border

    下一篇: How to downgrade from Internet Explorer 11 to Internet Explorer 10?