4

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

所以我一直在寻找答案并在这里找到了这个问题,<img> 元素是块级还是内联级?

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

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

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

它解决了这个问题。

但我有几个问题:

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

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

谢谢!

4

1 回答 1

1

解决方案:要解决此问题,请确保设置图像的高度和宽度,使其在加载过程中不会改变。

<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。

于 2012-11-01T23:00:58.967 回答