1
ネイティブのWindowsボタンのルックアンドフィールに合わせて簡単なボタンのスタイルを設定しようとしています。ボタンにパディングを追加すると、FirefoxとIEで他のボタンが押し下げられる
次のCSSを参照してください：
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#OfficeUI {
font-size: 11px;
font-family: "Segoe UI", "Open Sans";
}
.btn {
background-color: #E1E1E1;
border: 1px solid #ADADAD;
color: #444;
font-family: "Segoe UI", "Open Sans";
font-size: 11px;
height: 22px;
min-width: 74px;
padding: 0 1px 1px 0;
}
.btn:focus {
outline: none;
}
.btn:hover {
background-color: #E5F1FB;
border-color: #0078D7;
border-width: 1px;
}
.btn:active {
background-color: #CCE4F7;
padding: 0;
}
.btn-default {
border-color: #0078D7;
border-width: 2px;
}
をし、次のHTML：
これは、Chromeでアル作業を行いますが、Firefoxやエッジ（IE）で実行している場合、いくつかの奇妙な行動があります
<body>
<div id="OfficeUI">
<button type="button" class="btn btn-default">
Ok
</button>
<button type="button" class="btn">
Ok
</button>
</div>
</body>
ボタンは通常はスタイリングされています。ボタンを押すと、テストは1pxを右に、1pxを押して、一種の押された効果を与えます。
しかし、FireFoxで実行すると、2番目のボタンが1ピクセル下にシフトしますが、それはどのように可能ですか？
私はfiddleを添付しましたが、FirefoxやEdgeでは問題が再現できません。
あなたはフィドルで問題を再現することができない場合は、あなたのCSSの残りの不審でなければなりません。あなたはリセットを使用していますか？フィドルが壊れるまで、ますますあなたのコードを追加してください。 –
私はすべてのCSSコードをJsFiddleに入れたことを確認できますが、リセットを使用していません。私は、問題を解決するためにリセットを使用するのではなく、なぜこの動作をしているのか理解したいと思います。 – Complexity
あなたは正しいです。あなたのコードをブートストラップファイルにコピーしてFirefoxで開くと、私はこの問題を再現できましたが、Fiddleでは再現できませんでした。 –