いくつかのボタンのスタイルを設定しようとしています。ボタンの幅を制限し、水平方向のパディングを設定しようとしているため、テキストと境界線の間にスペースができています。
したがって、次の CSS をクラスに適用しました。
.class1 {
border: 1px solid;
padding: 0 20px;
max-width: 100px;
white-space: nowrap;
overflow:hidden;
}
例については、このjsFiddleを参照してください。
私の問題は、テキストが長すぎると、Firefox (最新バージョン: 22) が左パディングを尊重せず、このスクリーンショットの中央のボタンでわかるように、テキストが左の境界線にくっつくことです:
Chrome がまだ左パディングを尊重している場合:
ここでFirefoxをChromeやIE10と同じように動作させる方法はありますか?
私が決定したいくつかのこと：
- IE10 は Chrome と同じように動作するので、Firefox の問題だと思います。
- ボタンをスパンに置き換えれば機能しますが、もちろんボタンが必要です。
<a>意味的に正しくないので、必要がない場合は使用を避けたいと思います。 - プロパティを変更し
box-sizingたり、リセット-moz-focus-innerしたりしても役に立ちません。