在iOS 7上的Safari Mobile上未显示框阴影(在横向)

在iOS 7上的Safari Mobile上未显示框阴影(在横向)

问题描述:

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

I have a very simple box-shadow on an header:

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

但是box-shadow不能在Mobile Safari 。在以前的版本中(在纵向视图中,在iOS7中)可以正常工作。

But the box-shadow doesn't work on Mobile Safari (iOS 7). In the previous version (and in portrait view, in iOS7) it works fine.

这是屏幕截图:

并且 jsfiddle

我如何解决这个问题?

添加 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;
}

From:http://stackoverflow.com/a/21323644/1565597