Question

在此页面上似乎没有出现框阴影样式，但由于添加了超链接，因此这只是一个问题。请参阅代码。

box-shadow似乎在Chrome中运行良好，此问题主要出现在Internet Explorer中。

盒子阴影围绕DIV ID =“容器”。

感谢您的帮助！

以下是页面的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;

}
'

Answer 1

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

border-collapse: separate;

Answer 2

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

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

昨天我遇到IE无法呈现框阴影的问题属性。过了一会儿，想到了这个属性 “边界崩溃：崩溃;”对于周围的表阻止了渲染。我得到了从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;
}

Box-Shadow没有出现？

2 个答案: