在IE7 / 8中模拟CSS3 border-radius和box-shadow [英] Emulating CSS3 border-radius and box-shadow in IE7/8
问题描述
我正在处理小型网络应用程序的HTML;该设计需要具有圆角和阴影的内容区域。我已经能够使用CSS3生成此文件，并且它在Firefox和Chrome上正常工作：
但是，Internet Explorer 7和8（不支持CSS3）是一个不同的故事：
，轻量级的JavaScript解决方案，这将允许我1）使用IE特定的功能来实现这一点，或2）修改DOM（编程方式），在内容区域添加自定义图像模仿效果？
这是我的方法，我使用条件将CSS文件定位到IE浏览器。
假设您拥有ID为#page_container的 div 。在您的常规master.css或css3.css文件中，您将给它的宽度，高度，圆角和阴影与样式。
现在，页面，它将拉入您设置的条件css。对于同样的div＃page_container，你可以改变宽度的一点，高度，也许一些填充，然后给它一个背景图像，使它看起来像阴影，圆角版本。
因此，您的头将具有：
< head>
< link rel =stylesheettype =text / csshref =master.css/>
<！ - [if lte IE 8]> < link rel =stylesheettype =text / csshref =ie.css/> <！[endif] - >
< / head>
在master.css文件中，您将具有此主定义的定义：
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; / *这是键* /
background：#ccc url（/path/to/image.file）no-repeat top left;
}
添加足够的额外填充，使阴影适合您的背景图像。因为它级联下来，它会覆盖原来的10px填充，扩展框模型以适应您的额外的阴影图形。
这个方法的几个好处包括： / p>
- 只有IE会看到此定义和对图像的调用。如果这是一个大容量的应用程序，这将节省带宽和与调用相关的任何延迟。
- 同样，因为你没有硬编码的圆角图形，每个浏览器
- 无需添加另一个javascript插件来检查IE，创建新的标记，时间等...
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?
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:
<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:
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 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;
}
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:
- 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...
这篇关于在IE7 / 8中模拟CSS3 border-radius和box-shadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
