Safari 在页脚上的图标具有意外的垂直平铺,应显示在一行中

标签 safari image css

我试图将 twitter/facebook 图标添加到网站页脚,就像 side.cr 页脚一样。我让一切正常,除了 safari 有意想不到的 Twitter 和 Facebook 垂直磁贴。我尝试上传屏幕截图,但我是新用户,所以现在不能上传。

所以我在寻找答案并在这里找到了这个问题,Is <img> element block level or inline level?

于是我又去side.cr看了看它的css确实有user agent stylesheet。

我将这行代码添加到我的 CSS 中:

.footer ul li img.t, li img.f {
    width: 40px;
    vertical-align: middle;
    display: inline-block;
}

它解决了这个问题。

但我有几个问题:

  1. 为什么 side.cr 的 css 显示为不可编辑的用户代理,而我必须将该显示内联添加到我的 css?
  2. “display: inline-block”如何解决这个问题?

注意:当鼠标移到灰色的twitter上时,会触发swap.js,将图标图片改为彩色的,但在safari中,高亮的图标比灰色的大。我想我几乎知道答案了。只需要一个知道这背后所有问题的人。

谢谢!

最佳答案

解决方法: 要解决此问题,请确保设置图像的高度和宽度,使其在加载期间不会发生变化。

<img src="http://www.side.cr/images/contact/twitter_off.svg"
     class="twitter_bird img_swap" height="52px" width="52px" />

.twitter_bird {
    height:50px;
    width:50px
}

解释: 当您切换图像名称时,safari 开始加载图像,但在完成下载之前它不知道高度或宽度。如果设置高度和宽度,它不会从 0px 增长到 52px。

关于Safari 在页脚上的图标具有意外的垂直平铺,应显示在一行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13042957/

相关文章:

jquery - CSS 图像标注和模糊使高度看起来变大

javascript - 错误 [object BlobConstructor]' 不是 safari 中的构造函数

angular - Data-URL较大时,未渲染图像:net::ERR_CONNECTION_RESET

css - 在图像中结合背景混合模式和灰度

Jquery 悬停影响所有 Div

javascript - 如何使 div 向页面上的另一个元素缩小 100% 到 0%

html - 如何在 CSS 中正确设置宽度 - 需要修复 Mac 和 iPad 上 Safari 的错误

javascript - 模态出现后不可点击 - Safari

html - CSS 按比例移动文本 Safari

html - 在 Owl-carousel 中,隐藏了 border-radius 和 overflow 的父 div 中的图像不起作用