iphone - iPhone 6 Plus 上的 ios 8 盒子阴影

Question

我在 iPhone 6 plus 上遇到了 box shadow 属性的显示问题。如果我添加 meta tag width=device-width，则根本不显示以下框阴影：

-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px 5px #a8a8a8;

如果我不使用元标记，那么当您放大页面时，框阴影会“神奇地”消失。你可以在这里理解：

http://jsfiddle.net/b6aaq57z/3/

这似乎是特定的 iPhone 6 plus 错误。在运行相同 iOS 版本 (8.0.2) 的旧 iPhone 版本上，框阴影工作正常。

有没有人有解决方案？

Answer 1

您可以将border-radius:1px添加到div。它修复了 iphone 6+ 和其他视网膜设备中的盒子阴影问题

.box-shadow{
 -webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
 box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
 border-radius:1px;}    

Answer 2

尝试使用-webkit-apperance: none;

您可以将此添加到您的全局重置中以消除所有问题。我用：

*, *:before, *:after {
    -webkit-appearance: none;
}

我也在那里重置了我的盒子大小。