CSS 未应用于 iOS 台设备

Question

我在 iOS 设备上遇到奇怪的渲染问题

相关HTML:

<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>

我遇到了一个问题，瓶子图像前面呈现的数字并没有始终显示在瓶子的顶部

我已经通过浏览器堆栈测试了各种 phone 模型，这绝对是一个 iOS 问题，它不会在 android 上发生，它不会在 windows 上发生或MacOS

请注意，该网站于 2018 年 7 月中下旬在苹果商店使用不同的设备进行了测试——我们根本没有遇到这个问题——它现在突然支持了

在 iPhone X 上 - 它有时会在 CSS 加载后自行修复（大约 1-2 秒后），有时不会。 - 如图所示，我刚刚加载了网站并正确呈现，其他时候却没有。
如iPhone 8 的图像所示，初始加载时数字错位，在iOS Chrome 上，上下移动屏幕会立即更正它，在 Safari 上它不会 - 这与我测试过的 iOS 7,8,8 Plus 一致 - iPhone X 有时会在初始加载时正确显示。
在浏览器堆栈上打开开发工具会立即修复它 - 所以我不知道要检查什么（一旦工具 window 打开，它就会正确对齐）
有时在浏览器上单击刷新可以修复它以供后续重新加载，有时它会在每次重新加载时弄乱数字

我已经移动了 CSS，将类移动到 CSS 的顶部，看看是否有任何影响，它没有改变任何东西

我无法确定它的原因，因为只要我打开开发人员工具，它就会自行修复 - 似乎是 iOS 中的一些内部渲染错误？

我无法确定造成这种情况的原因 - 谁有任何建议？

Answer 1

我认为这可能是由 inline-flex 选项引起的。

试试这个：

.bottle-images {
    /* display: -ms-inline-flexbox; */
    /* display: inline-flex; */
    width: 84px;
    margin: auto;
}

.bottle-images:after {
    content: ' ';
    display: block;
    clear: both;
}

.bottle {
    margin: 0 2px;
    float: left;
}

只需像这样更新您的 css 并让我知道这是否有效。希望这有帮助。

CSS 未应用于 iOS 台设备

CSS not being applied on iOS devices

css

iphone

ios

responsive