IE8 和 IE11 上的盒子阴影问题

Question

在容器的 HTML 和 CSS 下方使用。在现代浏览器中没有问题。在 IE8 上，box-shadow 不起作用..所以填充白色背景缺失。

在 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 morebox-shadow。

在行动

.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);
}

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

如何处理旧浏览器？

我认为你不应该为了提供相似的外观和支持旧版浏览器而胡乱使用 CSS。相反，您可以选择应用Progressive enhancement 的原则。