ios - CSS 未应用于 iOS 设备

Question

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

这是网站 - http://dev.makeyourownbottle.com

相关 CSS:

.bottle-images {

    display: inline-flex;

}

.bottle-images img {
    width: auto;
}

.bottle img {

    width: 100%;
    padding: 0;
    position: relative;

}

.bottle p {

    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    top: 19%;
    color: #006699;
    font-weight: 700;
    padding-left: 2px;
    margin-top: 2.4em;
}

.bottle {

    margin: 0 2px;

}

相关的 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>

我遇到了一个问题，瓶子图像前面呈现的数字在瓶子顶部显示不一致

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

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

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

我已经移动了 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，让我知道这是否可行。希望这会有所帮助。