1

次のような左右のプロパティを使用して、端がコンテナーの端に固定されるように、可変幅のスペース全体にボタンを引き延ばそうとしています。

<button style="position: absolute; left: 0px; right: 0px;">Test</button>

これは、Chrome、IE、および Safari で期待どおりに機能します。ボタンはブラウザ ウィンドウの幅いっぱいに広がります。ただし、FireFox/SeaMonkey および Opera では、右のプロパティは無視され、ボタンはキャプションを保持するのに十分な幅です。何故ですか？

4

3 に答える 3

2

それを回避する唯一の方法は、100％の幅に設定されたボタンを内部に持つdivを絶対位置にすることであるように見えます。そのようです：

<body>
  <div style="width: 600px; height: 600px; position: relative;">
    <div style="position: absolute; left: 0px; right: 0px;">
      <button style="width:100%;">Test</button>
    </div>
  </div>
</body>

これはhttp://jsbin.com/aweleq/2/editで遊ぶための実際の実例です

既知のバグですhttps://bugzilla.mozilla.org/show_bug.cgi?id=471763

于 2012-11-15T21:43:34.980 に答える
0

ボタンの親要素で左右のスペースを定義し、ボタン自体を100％の幅に設定してみませんか。そんな馬鹿じゃないかと思います。

<div>
    <button>Test</button>
<div>

div {
    padding-left: 40px;
    padding-right: 60px;
}

button {
     width: 100%;
}​

必要に応じて、相対/絶対位置に設定することもできます。

</ p>

于 2012-11-15T21:56:00.953 に答える
0

ここでの基本的な問題<button>は、 が置換要素かどうかです。置換要素と非置換要素の規則は異なります。http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-widthとhttp://www.w3.org/TR/CSS21/visudet.html#abs-replaced-widthを比較

<button>あなたのバージョンの IE と WebKit はそうではありませんが、Firefox と Opera はここで置き換えられた要素として扱うようです。残念ながら、この要素が置き換えられた要素であるかどうかを実際に定義するものは何もありません。

ただし、WebKit は一般的に、間違いなく要素が置き換えられるものであっても、仕様のこの部分を間違っていることに注意してください。https://bugs.webkit.org/show_bug.cgi?id=81863を参照してください

于 2012-11-16T07:31:35.300 に答える