在 IE7/8 中模拟 CSS3 border-radius 和 box-shadow [英] Emulating CSS3 border-radius and box-shadow in IE7/8
问题描述
我正在为一个小型网络应用程序编写 HTML；该设计需要一个带有圆角和阴影的内容区域.我已经能够使用 CSS3 生成它，并且它可以在 Firefox 和 Chrome 上完美运行:
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:
但是，Internet Explorer 7 和 8(不支持 CSS3)是另一回事:
However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story:
是否有一种简单、轻量级的 JavaScript 解决方案可以让我 1)使用特定于 IE 的功能来实现这一点，或者 2)以这样一种方式修改 DOM(以编程方式)，在内容区域周围添加自定义图像到模拟效果?
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?
推荐答案
这是我的方法，我使用条件将 CSS 文件定位到 IE 浏览器.
This is my method, I use the conditionals to target CSS files to IE browsers.
假设您的 div 带有 ID #page_container.在您的常规 master.css 或 css3.css 文件中，您可以为其指定宽度、高度、圆角和带样式的阴影.
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.
现在，当 IE 访问您的页面时，它会拉入您设置的条件 css.对于同一个 div#page_container，你可以稍微改变宽度、高度，或者一些填充，然后给它一个背景图像，使它看起来像阴影，圆角版本.
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.
所以你的头会有这个:
<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 定义以下内容:
In the master.css file, you would have this definition for your main div:
div#page_container {
width: 960px;
height: auto;
padding: 10px 10px 10px 10px;
background: #ccc;
drop-shadow: whatever...
rounded-corner: whatever...
}
现在，在你的 ie.css 文件中，因为它在你的第二个文件中被引用，定义将级联向下，所以你可以稍微改变它:
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:
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 填充，扩展盒子模型以适应你额外的阴影图形.
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:
- 只有 IE 会看到这个定义和对图像的调用.如果这是一个高容量应用，这将节省带宽和与呼叫相关的任何延迟.
- 同样，由于您没有在每个浏览器都会看到的圆角图形中进行硬编码，因此您的 Firefox 和 Safari 用户不需要通过额外的图像调用来访问服务器.
- 无需添加另一个用于检查 IE、创建新标记、时间等的 javascript 插件...
这篇关于在 IE7/8 中模拟 CSS3 border-radius 和 box-shadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
