Question

我无法弄清楚，在一个页面中，为什么CSS3PIE在外页阴影上起作用，而不是在IE8中的照片阴影上起作用。一切都在其他浏览器中正常工作。

我正在使用#page作为外页div和 #facilities_maintable tr>td.column2 img用于页面内容中的照片。

#page 
{
    position:relative; 
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top:0px;
    background-image: url('../../content/img/bg4.jpg');
    background-repeat: no-repeat;
    background-color: #efebe0;

    -webkit-box-shadow: #222 0px 0px 8px;
    -moz-box-shadow: #222 0px 0px 8px;
    box-shadow: #222 0px 0px 8px;

    behavior: url('../../Content/PIE.htc');
}

#facilities_maintable tr>td.column2 img
{
    margin:5px 15px 5px 15px; 
    border:1px solid #666;
    -webkit-box-shadow: #777 3px 3px 5px;
    -moz-box-shadow: #777 3px 3px 5px;
    box-shadow: #777 3px 3px 5px;
    behavior: url('../../Content/PIE.htc');
}

Answer 1

设置td {border-collapse: separate;} 我知道，看起来很奇怪，但工作

Answer 2

Safari到版本5.1，Chrome到版本10.0和iOS支持属性-webkit-box-shadow。

Firefox 4.0版支持property-moz-box-shadow。

版本9.0以下的Internet Explorer不支持属性box-shadow。但是您可以使用过滤器的非标准属性：

filter: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, color = # 000000);

CSS3在同一页面中成功并失败

2 个答案: