Question

我正在使用CSS3 Pie在IE中创建框阴影和圆角。我有一个带有框阴影的背景容器，然后是另一个位于第一个顶部的div。会发生什么，框阴影围绕所有框，就像它是一个容器而不是一直概述。它在Chrome，Safari和Firefox中看起来很好，问题出在IE中。

遇到问题的页面是here。

这是代码，它非常简单：

<div id="standards_backing" 
class="gradient_1 gradient_2 gradient_3 gradient_4 gradient_5 gradient_6" 
style="-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: #666 0px 0px 4px;
-moz-box-shadow: #666 0px 0px 4px;
box-shadow: #666 0px 0px 4px;
background: fbfbfb;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(fbfbfb), to(f4f4f5));
background: -webkit-linear-gradient(fbfbfb, f4f4f5);
background: -moz-linear-gradient(fbfbfb, f4f4f5);
background: -ms-linear-gradient(fbfbfb, f4f4f5);
background: -o-linear-gradient(fbfbfb, f4f4f5);
background: linear-gradient(fbfbfb, f4f4f5);
-pie-background: linear-gradient(fbfbfb, f4f4f5);
behavior: url(pie.htc);">


<div id="standards_container_total">

<div 
class="standard_containers gradient_1 gradient_2 gradient_3 gradient_4 gradient_5  
gradient_6" 
style="-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: #666 0px 0px 4px;
-moz-box-shadow: #666 0px 0px 4px;
box-shadow: #666 0px 0px 4px;
background: fbfbfb;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(fbfbfb), to(f4f4f5));
background: -webkit-linear-gradient(fbfbfb, f4f4f5);
background: -moz-linear-gradient(fbfbfb, f4f4f5);
background: -ms-linear-gradient(fbfbfb, f4f4f5);
background: -o-linear-gradient(fbfbfb, f4f4f5);
background: linear-gradient(fbfbfb, f4f4f5);
-pie-background: linear-gradient(fbfbfb, f4f4f5);
behavior: url(pie.htc);">

</div></div></div>




var standards_backing = {
    "width": "690px",
    "margin-left": "17px",
    "padding-top": "35px",
    "padding-bottom": "30px"
};
var standards_container_total = {
    "width": "2968px",
    "margin-left": "-26px",
    "margin-top": "100px",
    "position": "relative"
};
var standard_containers = {
    "width": "341px",
    "margin-top": "-25px",
    "margin-left": "15px",
    "margin-right": "15px",
    "padding-top": "15px",
    "padding-bottom": "25px",
    "float": "left",
    "display": "inline-block"
};


$("#standards_backing").css(standards_backing);
$("#standards_container_total").css(standards_container_total);
$(".standard_containers").css(standard_containers);

Answer 1

尝试在面板上设置背景颜色，同时设置overflow: hidden;以防止背景在圆角上流动。

CSS3派对阴影问题

1 个答案: