CSS 未应用于 iOS 台设备

CSS not being applied on iOS devices

我在 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>

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

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

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

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

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

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

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

我认为这可能是由 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 并让我知道这是否有效。希望这有帮助。