0

私は次のCSSを持っています:

html.darkBlue button {
   border-color: #cccccc;
   color: #222222;
   background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
.question-marking-buttons button {
   padding: 0.4rem;
   height: 1.4rem;
   line-height: 1.4rem;
   margin-right: 0.5rem;
   float: left;
   width: 4rem;
}

ここに私のHTMLがあります：

<button>Mark</button>

Google Chrome では、ボタンの背景は次のようにボタンの上から下まで伸びます。

xxxxxxxxx
x       x
x Mark  x
x       x
xxxxxxxxx

Firefox では次のようになります。

xxxxxxxxx
x       x
x Mark  x
xxxxxxxxx

Chrome ではなく Firefox で背景が途切れる理由について誰かアドバイスをもらえますか?

4

2 に答える 2

2

編集：OKいくつかの理由

最初の問題は、高さ、幅、および行の高さの問題です。

2 つ目の問題は、ボタンと div のサイズが Firefox と Chrome で異なるのは、テキスト サイズだけが原因であるということです。Firefox では、テキスト サイズが少し大きくなります。

たとえば、テキスト サイズが 15 ピクセルの場合、Firefox は Chrome よりも 15 ピクセル大きくなります。

私が自分のウェブサイトでこれを修正した方法は、テキストにcufonを使用することです。cufon は外部フォントであるため、Firefox、Chrome、および他のすべてのブラウザーでまったく同じ幅で表示されます。これにより、メニューバーの幅とボタンの幅のクロスブラウザーの問題が解決されました。

また、rem の代わりに px または em を使用する必要があります。

注 1:この例では、必要な cufon ファイルをホストしましたyourjavascript.com。ただし、これらのファイルをダウンロードして自分の Web サイトでホストするか、 cufon Web サイトから自分でファイルを作成して、自分のサイトでファイルをホストする必要があります。

注 2:フォント ファイルを cufon にアップロードして cufon フォント ファイルを作成するには、C:\Windows\Fonts\使用するフォント (つまりArial) を見つけてデスクトップにコピーします。次に、そのフォント ファイルをホスティング用の cufon Web サイトにアップロードします。cufon で別のフォントを使用する場合は、Google フォントまたは他のサイトからフォント ファイルをダウンロードすることもできます。

まとめ：

問題 1: line-height が高さを拡張する
問題 2:パディングが間違っている
問題 3: firefox が異なるサイズのテキストを作成する。cufon を使用して問題を回避する
問題 4:ハックの前にパディングが必要
です 問題 5:ボックスサイズ変更のハックが必要です。これにより、パディングが幅に追加されなくなります。
問題 6: css をボタンに具体的に設定する必要があります。

jsbin に関する私の完成した修正を参照してください:
http://jsbin.com/AxiCiNA/3

コード（jsbin私が作成したものと同じもの）：

page.html

<html>
<head>
<script src="http://yourjavascript.com/319153210071/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/330149971117/thearialcufonfile.js"></script>
</head>
    <body>
        <button id='one'>Mark</button>
        <button id='two'>Mark</button>
    </body>
</html>

スタイル.css

#one {
   border-color: #cccccc;
   color: #222222;
   background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
button#two {
   padding: 1px 8px;
   margin: 0;
   margin-right: 9px;
   float: left;
   font: 15px 'Times New Roman, Serif';
   height: 25px;
   width: 50px;
   line-height: 10px;
   /* box-sizing hack for chrome */
   -webkit-box-sizing: border-box;
   /* box-sizing hack for firefox */
   -moz-box-sizing: border-box;
   /* box-sizing hack for opera */
   box-sizing: border-box;
   /* padding-before hack for chrome */
   -webkit-padding-before: 1px;
   -webkit-padding-after: 0;
   -webkit-padding-start: 1px;
   -webkit-padding-end: 0;
   /* padding-before hack for firefox */
   -moz-padding-before: 0px;
   -moz-padding-after: 0;
   -moz-padding-start: 1px;
   -moz-padding-end: 0;
   /* padding-before hack for opera */
   padding-before: 1px;
   padding-after: 0;
   padding-start: 1px;
   padding-end: 0;
}

script.js

Cufon.replace('#two', { fontFamily: 'Arial' });
于 2013-10-17T14:14:44.940 に答える