IE8上的盒子阴影问题＆amp; IE11

Question

在HTML＆amp;容器的CSS。现代浏览器没有问题。在IE8上，盒子阴影不起作用..所以填充白色背景缺失。

在IE11上，不确定为什么1px边界切断发生。缩放级别100％。

HTML

<div class="head-row">
  <div class="head-featured">
    <h1>
      <span>Your ambitions. Our Solutions.</span>
    </h1>
  </div>
</div>

CSS

.head-row{
  width: 47%;
}

.head-featured {
    background: none;
    margin-top: 5px;
    padding: 0 18px 0 20px;
    top: 0;
    min-height: 50px;
}

.head-row .head-featured span{
    display: inline;
    background-color: #fff;
    font-size: 2.375em;
    color: #292576;
    padding: 5px 0;
    line-height: 1.7em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    -moz-box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
    -webkit-box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
    box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
    zoom: 1;
}

Answer 1

IE8不支持CSS box-shadow，it needs IE9+。您可以使用filter模拟一些类似的输出：

.box-shadow {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=20, OffY=0, Color=#ffffff);
}

您可以read more关于box-shadow。

在行动中

＆＃13;

＆＃13;

.head-row{
  width: 47%;
}

.head-featured {
  background: none;
  margin-top: 5px;
  padding: 0 18px 0 20px;
  top: 0;
  min-height: 50px;
}

.head-row .head-featured span{
  display: inline-block;
  background-color: #fff;
  font-size: 2.375em;
  color: #292576;
  padding: 5px 0;
  line-height: 1.7em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -moz-box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef;
  -webkit-box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef;
  box-shadow: 20px 0 0 #efefef, -20px 0 0 #efefef;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=20, OffY=0, Color=#efefef);
}

＆＃13;

<div class="head-row">
  <div class="head-featured">
    <h1>
      <span>Your ambitions. Our Solutions.</span>
    </h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何处理旧浏览器？

我认为你不应该用你的CSS来提供类似的外观并支持旧的浏览器。相反，您可以选择应用Progressive enhancement的原则。