一个图片不显示的问题

November 12, 2018

今天帮同事看一个图片不显示的问题,情况是在电脑上图片都是正常显示的,但是在 iOS 上发现一些图片显示,一些图片不显示。接到问题的时候对这个问题的描述是没有显示图片的img元素没有对应的图片请求,以background设置的图片显示都没有问题。这对问题的排查造成了一定的障碍,因为这自然地把问题排查点引向了没有发生这个图片请求的原因。几次试验无果后我仔细看了看无法显示图片的img的样式,发现了类似这样的一条规则:

.foo {
  /* ... */
  content: 'viewport-units-buggyfill;...';
  /* ... */
}

将这条规则去掉之后,发现图片就能显示了。

因此我们需要对图片元素设置一个规则:

img {
  content: normal !important;
}

问题就迎刃而解了。

不过之前我没有看到过这种东西😂,进一步了解发现这是另一种移动端布局的方案,关于H5移动端布局的很多知识都是通过阅读大漠的文章获知的,而对于这个方案,大漠也写过一篇文章,发现这篇文章在2018年初就发布了,居然一直没看到,在今天之前也没有进一步了解当前移动端布局的情况,只停留在 rem,以及 vh、vw + fallback 到 rem,惭愧惭愧:

如何在Vue项目中使用vw实现移动端适配

# CSS
# 前端
知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
© 2015 - 2022 zhuscat
Hosted on Vercel