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

标签 safari image css

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

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

所以我再次去 side.cr 看它的 css 确实有用户代理样式表。

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

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

它解决了这个问题。

但我有几个问题:
  • 为什么 side.cr 的 css 显示为不可编辑的用户代理,而我必须将该 display-inline 添加到我的 css 中?
  • "display: inline-block"如何解决问题?

  • 注意:当鼠标悬停在灰色推特上时,会触发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/

    相关文章:

    html - iOS iPad上Safari的文本换行问题

    html - 隐藏图像背景

    C# - 正确加载索引彩色图像文件

    html - 打印 (Cocoa) WebView 内容会导致剪切图像

    html - 在之后的两个固定div周围的div中使动态大小div溢出

    ios - Plupload错误地旋转上传的照片,但仅在Safari上

    css - Safari 5.x 上使用 CSS 的灰度图像

    javascript - jQuery选择多选

    javascript - 您如何以编程方式确定 HTML 对象可以监听哪些事件?

    javascript - 使用HTML5文档类型时容器中的额外顶部填充