7

絶対配置の CSS フォーマットを勉強してい<input>ます。コンテナー (「絶対」に配置されている) 内で「ストレッチ」して、たとえば左右に 30px を残して、その中のすべてのスペースを埋めるようにしたいと思います...

CSS で一種の「フレームセット」を作成するために左と右の両方を使用するサンプルを w3.org サイトで既に見つけました。

この種の手法について話しているA-List-Apart の記事も読み、ここで同様の問題を扱っている他のいくつかの質問を見つけましたが、これらのどれも、これから説明する特定の問題に焦点を当てていません。<input>また、インナーを でラップできることもわかりましたが<div>、この件についてもう少し掘り下げて、なぜ動作がおかしいのかを理解したいと思います...

これは、アイデアをテストして明確にするために作成した実用的なサンプルです。要するに、これは次のような単純なものです。

<div id="sidebar">
  <input type="text" value="input" />
</div>

このようなスタイルで：

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar input {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
    width: auto;
}

興味深い点は、左と右を設定し、幅を「自動」のままにした最後の 3 行にあります。

その結果、Chrome (v.26) を使用すると期待どおりにしか機能しませんが、FF.20 または IE.10 では壊れているように見えます:<input>コンテナ div の右マージンを超えて拡張します。 :100% と設定のみ左の位置...

おもしろいことに、DIV とインライン ブロック SPAN を使用したこのアプローチは、3 つのブラウザーすべてで期待どおりに機能します。

ブラウザ側のバグですか？<input>width:100% で囲む回避策なしで機能させる方法はあり<div>ますか?

誰かがこれについて手がかりを持っていることを願っています。

PS: 私は「最新」の html5 ブラウザーに焦点を当てているので、IE8 以前で動作しなくてもかまいません..

4

3 に答える 3