4

side.crフッターと同じように、サイトフッターにtwitter/facebookアイコンを追加しようとしていました。TwitterとFacebookの予期しない垂直タイルを持つサファリを除いて、すべてが機能しました。スクリーンショットをアップロードしようとしましたが、私は新しいユーザーなので、今はできません。

だから私は答えを探していて、このq/aを見つけました<img> 要素はブロックレベルですか、それともインラインレベルですか?

そこで、再度 side.cr にアクセスして、css にユーザー エージェント スタイルシートが含まれていることを確認しました。

次のコード行を CSS に追加しました。

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

そしてそれは問題を修正しました。

しかし、頭の中にいくつかの質問があります。

  1. CSS に display-inline を追加する必要があるのに、side.cr の CSS が編集不可のユーザー エージェントとして表示されるのはなぜですか?
  2. 「display: inline-block」はどのように問題を解決しますか?

注意: グレーの 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 に答える