ブラウザに応じてCSSファイルのセクションを読み込みます。

Question

Chromeには、Firefoxに比べてぼんやりと見えるボタンがウェブサイトにあります。
ボタンのHTMLは次のようになります。私はこの権利をやっているかはわからない

.boton { 
    font-size: 17px; 
    color: #000; 
    background: #ee3333; 
    background: rgba(225, 50, 50, 0.6) !important; 
    font-family: lucida console; 
    border: 1px solid #FF4444; 
    padding: 2px; 
    -moz-border-radius: 7px; 
    border-radius: 7px; 
    cursor:pointer; 
} 
.chrome .boton 
{ 
    padding: 5px !important; 
} 

：
<button name="shutdown" type="submit" value="df" class="boton"> Press </button>

のように私のCSSの試行が見えます。 ".boton"は実際にボタンのスタイルを変更しますが、Chromeではパディングは変更されません。ここで何が間違っていますか？

Answer 1

要素にパディングが適用されない理由は、いずれの要素にも割り当てられているchromeクラスがないためです。特定のベンダー固有のスタイルについてはさまざまなハックがありますが、this articleを参照してください。ブラウザーには.chromeまたは.mozなどのクラスが適用されません。

しかし、より水平なパディングを実現するには、-webkit-padding-start（パディング左）と-webkit-padding-end（パディング右）を使用できます。現在、私は完全なパディング、またはこれらのための垂直パディングがまだあるとは思わない。 、またはいずれかのルールを使用する場合は、paddingルールの後に必ず入力してください。それ以外の場合は後者が前者を上書きし、両方が失われます。

Answer 2

あなたがクラス.chromeなどを本体に追加するブラウザスニッフィングを追加していない限り、そのクラスは効果がありません。

一方、FirefoxとChromeのボックスモデルは大きく異なるわけではありませんが、パディング、枠線、余白などのデフォルトは異なる場合があります。これらの値を明示的に設定するだけで、同じようにレンダリングする必要があります（丸め誤差が異なるため、ピクセルを数えたり取ります）。各ブラウザにカスタムCSSを追加する必要はありません（ただし、-moz-border-radiusと-webkit-border-radiusなどの実験的なCSS機能をベンダープレフィックスと併用する場合は、すべてを同時に使用する必要があります。 IE（インターネットエクスプローラ）の

異なるバージョンが根本的に異なるのボックスモデルを持っている、とあなたはIE固有のCSSオーバーライドを含めるようにconditional commentsを使用する必要があり、標準のCSSで正しく何かをレンダリングするためにIEのいくつかのバージョンを取得することができない場合メインのCSSファイルの後。