このコード例を参照してください：http：//jsfiddle.net/Z2BMK/
Chrome / IE8は次のようになります
Firefoxは次のようになります
私のCSSは
button {
padding:0;
background:#080;
color:white;
border:solid 2px;
border-color: #0c0 #030 #030 #0c0;
margin:0;
}
コードサンプルを変更して、両方のブラウザでボタンを同じにする方法を教えてください。JavaScriptベースのハイパーリンクはキーボードのスペースバーhrefでは機能せず、URLが必要であるため、JavaScriptベースのハイパーリンクを使用したくありません。
button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }
border-widthのは-moz-focus-innerだった1px書き込みので、デフォルトではborder-widthコードには冗長であるが、それはそれは、より何が起こっているかをクリアすることができます。将来の保証にも役立つ可能性があります。あなたの質問に答えるためにborder-width、Firefoxのが違いの原因であり、追加することmargin: -1pxは私の以前のソリューションよりも互換性のあるソリューションです。
margin: -1pxます。これは非常に複雑です。1）レンダリングエンジンのバグが発生する（発生する）、2）境界線の色が異なる、3）ズームインする。ソリューションの潜在的な問題を示すために、フィドルを用意しました：jsfiddle.net/Z2BMK / 455。ズームインして、赤い境界線が表示されていることを確認してください。
回答:
これを追加：
button::-moz-focus-inner {
padding: 0;
border: 0
}
http://jsfiddle.net/thirtydot/Z2BMK/1/
border上記のルールを含めることは、ボタンが両方のブラウザで同じように見えるために必要ですが、ボタンがactiveFirefoxにあるときに点線のアウトラインを削除します。多くの開発者は、この点線の輪郭を取り除き、オプションで、より視覚的にわかりやすいものに置き換えます。
button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}。これは点線がないことを補い、私が求めていたブラウザの一貫性を提供します。
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
filecssを除く）。申し訳ありませんが、私がやろうとしていたページに競合するCSSがあったに違いありません。ありがとう。
入力要素でも修正するには、
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
シンプルで完璧です！
input[type="file"] > input[type="button"]::-moz-focus-innerすでに追加しているので冗長ではありませんinput[type="button"]::-moz-focus-innerか、それともあなたの経験ではありませんか？あなたは知っていますか？
margin: -1pxですか？どういうわけか接続されていborder: 2pxますか？