0

私は次のスタイルを持っています：

  background-color: #C9C5BC;
  color: #FFF;
  font-size: 10px;
  font-weight: bold;
  padding: 0 3px;
  text-transform: uppercase;
  cursor:pointer

HTML要素は

<span class="name-indicator">NameIndicator1</span>

これはFirefoxのようです（望ましい）

ここに画像の説明を入力してください

Chromeでは次のようになります（間違っています）

ここに画像の説明を入力してください

問題は、クロムではスパン要素の間に空白がないことです。これは、FFでは高さが13ピクセル、クロムでは15ピクセルであるため、クロムのフォントサイズを7ピクセルに設定すると正しい効果が得られました。

これを両方のブラウザで同じになるように修正するにはどうすればよいですか？フォントサイズを10pxに保ちたい

編集：

フィドルを作成しました。FFとChromeの両方を見てください。

4

2 に答える 2

1

多くのブラウザで同じ結果が得られる可能性を高めるためcss-resetに、ページの先頭で使用します。この小さなcssにより、すべての要素がすべてのブラウザーで同じデフォルト値を持つようになります。ここから入手できます。

于 2012-05-20T09:12:42.480 に答える
1

codesスタックオーバーフローの回答が、提供された画像（2番目の画像）に似ていることに気付きました。このCSSline-height: 21pxをコンテナ.wmd-preview pに配置すると、コード間に区切りが表示されます。したがって、これらのコンテナにline-heightを追加することで、問題を解決できますspan。

于 2012-05-23T12:17:41.973 に答える