Box-Shadow 没有出现？答案

【问题标题】：Box-Shadow isn't appearing?Box-Shadow 没有出现？
【发布时间】：2013-11-28 01:45:39
【问题描述】：

在此页面上，box-shadow 样式似乎没有出现，但这只是一个问题，因为已经添加了超链接。请看代码。

box-shadow 在 Chrome 中似乎可以正常工作，这个问题主要在 Internet Explorer 中。

盒子阴影在 DIV ID="container" 周围。

感谢您的帮助！

这是页面的 HTML..

`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="images/logo.png">
</div>
<div id="title">
<h1>FOOTBALL MANAGER</h1>
<h2>HOME</h2>
</div>
</div>
<div id="nav">
<a href="index.html">Home</a>
<a href="how_to_install.html">How To Install</a>
<a href="where_to_buy.html">Where To Buy</a>
<a href="about_us.html">About Us</a>
<a href="contact_us.html">Contact Us</a>
</div>
<div id="mheading">
<h4>Heading</h4>
</div>
<div id="fmlogo">
<p>fmlogo</p>
</div>
<div id="footer">
<span>
Copyright 2013 Top Notch Multi-Media
</span>
<span id="update">
Site last updated at 22:15 23 November 2013
</span>
</div>
</div>
</body>
</html>
`

还有 CSS..

'
@charset "utf-8";


body {
    height:1100px;
    background-color:#999; /*needs defining in house style */
    margin:0px;
    padding:0px;

}

h1 {
    font-family: Verdana;
    font-size: 53px;
    text-shadow: 1px 1px 7px #000;

}

h2 {
    font-family:Verdana;
    font-size:35px;
    text-shadow: 1px 1px 7px #000;

}

h3 {
    font-family: Verdana;
    font-size: 20px;

}

h4 {
    font-family:Verdana;
    font-size:35px;
    margin: 0px;

}

#container {
    width:950px;
    height:1100px;
    margin:0 auto;
    background-color:#FFF;
    border-style:solid;
    border-width:1px;
    border-color:#000;
/*order goes Horizontal offset, Vertical offset, Blur radius, Spread distance, Color */
    box-shadow:0px 0px 100px 10px #000;

}

#header {
    position:relative;
    height:170px;
    background-color: #30A7BF;
    margin:0px auto;
    padding: 1px;

}

#title {
    position:absolute;
    top: 15px;
    left: 315px;

}

#nav {
    position:relative;
    height: 60px;
    margin: 0 auto;
    background-color:#CF6;
    border-style: solid;
    border-color: black;
    border-bottom-width:2px;
    border-top-width:2px;
    border-right-width:1px;
    border-left-width:1px;
    text-align: center;

}

a {
    position: relative;
    top: 3px;
    display: inline-block;
    margin: -3px;    
    height: 56px;
    width: 188px;
    background-color: #E39734;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
    font-family: Verdana;
    font-size: 20px;
    line-height: 55px;
}

#button {
    position: relative;
    top: 3px;
    display: inline-block;
    margin: -3px;    
    height: 56px;
    width: 188px;
    background-color: #E39734;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
    font-family: Verdana;
    font-size: 20px;
    line-height: 55px;
}

.button:hover {
    background-color: #BD7E2D;
} 

a:link {
    text-decoration: none;
    color: #000;

}

a:visited {
    text-decoration: none;
    color: #000;

}

a:hover {
    text-decoration: underline;
    color: #636363;

}

#logo {
    position:absolute;
    height:130px;
    width:340px;
    top:17px;
    left: -10px;
    border-style: solid;
    border-width:0px;
    border-color:black;

}

img {
    width: 100%;

}

#mheading {
    position:relative;
    top: 10px;
    left: 5px;
    width: 940px;
    height: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    text-align:center

}

#fmlogo {
    position: relative;
    margin: 0px;
    top: 649px;
    margin: 0 auto;
    width: 940px;
    height: 100px;
    border-style: solid;
    border-color: #000;;
    border-width: 1px;
    text-align: center;

}

#footer {
    position: relative;
    margin: 0px;
    top: 659px;
    width: 940px;
    height: 30px;
    background-color: #9F3;
    border-style: solid;
    border-color: black;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    padding-left: 5px;
    padding-right:5px;
    padding-top: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;

}

#update {
    float: right;

}
'

【问题讨论】：

为什么你的 html 开头有这个 ` 而你的 css 开头有这个 '？像一根大绳子
@SantiagoRebella 不在 HTML 上，我只是把它放在那里，在我插入的时候引用 HTML 编码，可以忽略。
如果你取消注释，那么这里的代码看起来会更好，更容易理解

标签： html internet-explorer google-chrome css

【解决方案1】：

您使用的是哪个版本的 IE？如果是 IE 9 或更低版本，则必须在容器类 css 声明中使用以下内容：

border-collapse: separate;

【讨论】：

抱歉，我以为这个问题在 IE10 中已修复，但显然没有。很好地找到@Santiago。

【解决方案2】：

看看我在这里找到的答案：

http://blog.mi-ernst.de/2013/04/06/ie9-ie10-css-shadow-not-rendered/

昨天我遇到了 IE 不渲染 box-shadow 的问题财产。过了一会才发现物业 “边界崩溃：崩溃；”对于周围的桌子防止渲染。我从 JS 的样式表中继承了属性框架。将我的 css 操作为以下配置后：

.shadowed {
    -moz-box-shadow: 0 0 5px 5px #DDD;
    -webkit-box-shadow: 0 0 5px 5px #DDD;
     box-shadow: 0 0 5px 5px #DDD;
     border-collapse: separate;
}

【讨论】：