2

次のようにタグをスタイルcodeします。

 code {
   display: inline-block;
   white-space: no-wrap;
   background: #fff;
   font-size: .8em;
   line-height: 1.5em;
   color: #555;
   border: 1px solid #ddd;
   -webkit-border-radius: 0.4em;
   -moz-border-radius: 0.4em;
   -ms-border-radius: 0.4em;
   -o-border-radius: 0.4em;
   border-radius: 0.4em;
   padding: 0 .3em;
   margin: -1px 0;
   overflow: hidden;
   background-clip: padding-box;
   -webkit-background-clip: padding-box;
 }

そして、これがどのようにレンダリングされるかです

  • サファリ（正解）
    ここに画像の説明を入力
  • クロム (不適切な位置合わせ)
    ここに画像の説明を入力
  • Firefox (不適切な位置合わせ)
    ここに画像の説明を入力

特に、Chrome と Safari のレンダリングが異なるのは奇妙だと思います。垂直方向の配置を通常のテキストと同じベースラインに戻すにはどうすればよいでしょうか?

4

2 に答える 2

4

vertical-align: middle;line-height の代わりに使用することもできます。

于 2013-10-25T11:45:57.200 に答える
2

同じ問題ではないかもしれませんが、最近、display: inline-block要素を使用するline-heightと、Safari と Chrome の配置が異なることがわかりました。私の状況では、追加vertical-align: middleすると、少なくとも同じように整列され、line-height を使用して正しく配置できるようになります。

于 2014-09-24T19:56:26.207 に答える