iOS 7 上的 Safari Mobile 上未显示框阴影（横向）

Posted 2023-02-22

【中文标题】iOS 7 上的 Safari Mobile 上未显示框阴影（横向）

【英文标题】：Box-shadow not shown on Safari Mobile on iOS 7 (in landscape)

【发布时间】：2014-02-19 12:36:54

【问题描述】：

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

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 (ios 7)。在以前的版本中（以及在 iOS7 中的 纵向视图 中）它可以正常工作。

截图如下：

还有一个jsfiddle。

我该如何解决这个问题？

【问题讨论】：

iPhone 5 iOS 7.0.4，Safari 一切正常

【参考方案1】：

尝试使用正确的供应商前缀为 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-

【讨论】：

我已经试过了，还是不行。你有什么版本的 Safari？

在纵向工作，我错过了你的说明。

【参考方案2】：

我尝试阅读 Bootstrap 代码。 也许设置下面的代码会解决它。

background-clip: padding-box;

【参考方案3】：

试试下面的 CSS 属性：

-webkit-appearance: none;

【讨论】：

太棒了！解决了 iOS 11 上 iPad 上未出现微妙框阴影的问题。

【参考方案4】：

添加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://***.com/a/21323644/1565597。

【讨论】：

我在全角 div 上有一个盒子阴影，偶尔会在手机 iOS 上显示，但在 iPad 上看起来还不错。这个 1px 的半径也为我解决了这个问题。谢谢！

什么鬼！ .....它与盒子阴影没有“逻辑”关系，幸运的是它解决了我的问题......