iOS 7上的Safari Mobile上未显示Box-shadow（横向）

Question

标题上有一个非常简单的box-shadow：

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

但是盒式阴影在Mobile Safari（iOS 7）上不起作用。在之前的版本中（以及纵向视图，在iOS7中），它可以正常工作。

以下是截图：

和jsfiddle。

我该如何解决这个问题？

Answer 1

添加border-radius: 1px解决了问题：

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    border-radius: 1px;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

来自：https://stackoverflow.com/a/21323644/1565597。

Answer 2

尝试以下CSS属性：

-webkit-appearance: none;

Answer 3

我尝试阅读Bootstrap代码。
也许设置以下代码即可解决问题。

background-clip: padding-box;

Answer 4

尝试使用正确的供应商前缀为box-shadow添加前缀。在这种情况下：

-webkit-box-shadow: 0 4px 9px -8px #000000;

在你的jsfiddle为我工作。

注意：如果您希望css3在其他浏览器上具有防故障功能，请参阅此处：https://www.w3.org/TR/CSS2/syndata.html#vendor-keyword-history以获取前缀列表。最重要的是-o-，-moz-，-ms-和-webkit-