内盒暗影师

Question

需要帮助转换我在好浏览器中工作的一些css现在适用于Internet Explorer。这就是我现在所拥有的

.headerLoginFooter
{   
    background-color:#f5f5f5; 
    padding:7px 10px 7px 10px; 
    margin:20px 0 0 0; 
    -moz-box-shadow:inset 0 8px 6px -6px #c4c4c4; 
    -webkit-box-shadow:inset 0 8px 6px -6px #c4c4c4; 
    box-shadow:inset 0 8px 6px -6px #c4c4c4;
}

最后的三个属性在登录框的页脚部分内产生向内发光，该div看起来像这样

我能够在此处获取此样式的代码CSS Tricks，但我需要使其与Internet Explorer兼容。我的第一个问题是我只有一台mac，所以我没有Internet Explorer来轻松测试我的代码。我的第二个问题是我没有像他在代码中那样转换上面的代码。有人可以帮助我按照链接中的指南将我的上述代码转换为适用于Internet Explorer的工作。谢谢。

Answer 1

IE很多非常有很多CSS3功能，特别是旧版本。

我建议您使用CSSpie在CSS样式表中使用。之前已经回答here。

有些东西可以阻止盒子阴影在IE中工作:(如果它们应用于同一个元素）

• 圆角/ border-radius
• overflow:hidden
• background-color
• 背景渐变

为了解决这个问题，我通常将一个容器嵌入到我要用一个盒子阴影设计的容器中。

<style>
.boxShadow {
 behavior: url(PIE.htc);
 -webkit-box-shadow: inset 0 8px 6px -6px #c4c4c4;  
 -moz-box-shadow: inset 0 8px 6px -6px #c4c4c4;  
 box-shadow: inset 0 8px 6px -6px #c4c4c4; 
overflow:visible;
}
.otherStyles{
background-color:#f5f5f5;
border-radius:0px;/*or other value*/
/*gradients can be placed here too.*/
}
</style>
<div class="boxShadow">
  <div class="otherStyles">
     ...content...
  </div>
</div>