IE9上的方框阴影无法使用正确的CSS渲染，适用于火狐和Chrome
IE9上的方框阴影无法使用正确的CSS渲染，适用于火狐和Chrome
提问于 2011-04-11 14:17:35
我正在尝试模拟一个浮动模式的盒子类型的东西，但是在IE9和它的盒子阴影实现上遇到了问题。
下面是我使用的代码的摘要，它可能会重复这个问题：
<html>
<head>
<title>Sample page</title>
<style>
.content-holder {
border-collapse: collapse;
}
.back {
background-color: #a8c0ff;
padding: 100px;
}
.inner {
background-color: #fff;
text-align: center;
padding: 50px;
box-shadow: 0px 0px 20px #000;
}
</style>
</head>
<body>
<table class="content-holder">
<tr>
<td>
<div class="back">
<div class="inner">
<h2>Heading</h2>
<p class="subtext">Some text here</p>
<p>More text</p>
<a class="button" href="#">A button</a>
</div>
</div>
</td>
</tr>
</table>
</body>
它在火狐/Chrome等浏览器中运行良好，但IE9不能显示阴影。我可以将其更改为内嵌阴影，它看起来就像它应该出现的那样，但外部阴影继续躲避我。
有没有人能对这个阴影问题有所了解？
回答 9
Stack Overflow用户
回答已采纳
发布于 2011-04-11 14:27:55
正如在注释中发现的(不是我发现的)，您必须将border-collapse: separate;添加到box-shadow未处理的元素中。
从我最初的回答来看，还要确保第一行有一个有效的文档类型，比如<!DOCTYPE html>。点击F12打开开发人员工具，并确保正在使用IE9模式(或更高版本)，因为这是box-shadow工作所必需的。
Stack Overflow用户
发布于 2011-06-11 08:01:52
只需确认这个问题和第二个@Arowin的最后一个解决方法，因为它可能会被一些人遗漏-将border-collapse:separate;添加到受影响的<div> - IE9现在显示正确的阴影，当<div>包含在设置了border-collapse:collapse;的<table>中时。谢谢!
Stack Overflow用户
发布于 2012-02-09 01:19:56
IE9输入框-阴影错误解决方案将解决此错误。
input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}为了解决表上的这个问题，您需要添加border-collapse: separate;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5617455
复制相关文章
相似问题
腾讯云开发者
