0

我正在使用 CSS3 Pie 在 IE 中创建盒子阴影和圆角。我有一个带有盒子阴影的背景容器，然后是位于第一个顶部的另一个 div。发生的情况是，盒子阴影围绕着所有盒子，就好像它是一个容器一样，而不是一直勾勒出两个盒子。它在 Chrome、Safari 和 Firefox 中看起来很好，问题只是在 IE 中。

有问题的页面在这里。

这是代码，它非常简单：

<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);
4

1 回答 1

0

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

于 2012-10-17T19:36:05.480 回答