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 月中下旬在苹果商店使用不同的设备进行了测试——我们根本没有遇到这个问题——它现在突然支持了
- 在 iPhone X 上 - 它有时会在 CSS 加载后自行修复
(大约 1-2 秒后),有时不会。 - 如图所示,我刚刚加载了网站并正确呈现,其他时候却没有。
- 如iPhone 8 的图像所示,初始加载时数字错位,在iOS Chrome 上,上下移动屏幕会立即更正它,在 Safari 上它不会 - 这与我测试过的 iOS 7,8,8 Plus 一致 - iPhone X 有时会在初始加载时正确显示。
- 在浏览器堆栈上打开开发工具会立即修复它 - 所以我不知道要检查什么(一旦工具 window 打开,它就会正确对齐)
- 有时在浏览器上单击刷新可以修复它以供后续重新加载,有时它会在每次重新加载时弄乱数字
我已经移动了 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 并让我知道这是否有效。希望这有帮助。
我在 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 月中下旬在苹果商店使用不同的设备进行了测试——我们根本没有遇到这个问题——它现在突然支持了
- 在 iPhone X 上 - 它有时会在 CSS 加载后自行修复 (大约 1-2 秒后),有时不会。 - 如图所示,我刚刚加载了网站并正确呈现,其他时候却没有。
- 如iPhone 8 的图像所示,初始加载时数字错位,在iOS Chrome 上,上下移动屏幕会立即更正它,在 Safari 上它不会 - 这与我测试过的 iOS 7,8,8 Plus 一致 - iPhone X 有时会在初始加载时正确显示。
- 在浏览器堆栈上打开开发工具会立即修复它 - 所以我不知道要检查什么(一旦工具 window 打开,它就会正确对齐)
- 有时在浏览器上单击刷新可以修复它以供后续重新加载,有时它会在每次重新加载时弄乱数字
我已经移动了 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 并让我知道这是否有效。希望这有帮助。