23

<input>HTML の要素が「左」と「右」のプロパティの CSS ペアを無視していることに気付きました。「上」と「下」のペアも同様です。以下のサンプル コードを参照してください。

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

ブラウザの<input>ほぼすべてのスペースを占めるはずです (周囲の 10px の境界線を除く)。Safari では問題なく動作しますが、FireFox と IE では<input>ブラウザの左上隅に小さいままです。

「左」と「幅」、「上」と「高さ」を使用すると、すべて正常に機能します。ただし、幅と高さはわかりません。ブラウザウィンドウのサイズに応じて調整してください。

これを回避する方法はありますか？

ありがとう。

4

4 に答える 4

17

ラッパーDIVを使用できます

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>
于 2009-01-16T13:24:18.723 に答える
5

左または上を無視しているのではなく、10px 離れていることがわかります。起こっていることは、右と下が尊重されていないということです。フォーム要素はレイアウト エンジンで少し特別に扱われます。FF/IE が入力の幅/最大長をより重要と見なす可能性は十分にありますが、その理由については詳しく調べていません。

とはいえ、それは少し奇妙なことです。おそらく、コンテナ div に 10px のマージンを<textarea>適用して処理することで、100% のサイズにプッシュできる大きなテキスト入力を提供するように設計されているものを確認することをお勧めします。width: 100%; height: 100%;

WFM:

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

于 2009-01-16T13:02:44.307 に答える
1

http://reference.sitepoint.com/css/bottom インターネット エクスプローラーについて (<= 6)

上、右、下、左を一緒に使用する絶対配置要素の位置と寸法の両方の指定をサポートしません。最後に指定された垂直位置と水平位置を使用し、幅と高さを使用して寸法を指定する必要があります

于 2009-01-16T13:27:20.853 に答える
0

Safari での表示方法は、本来の表示方法ではありません。高さの値を指定しなかったため、inputは最後に継承されたフォント サイズのサイズにデフォルト設定されます。

上下の余白を同時に設定しようとしているため、左右の配置も無視されます。この場合、それらが優先されるようです。

フィールドを使用する必要があり、input表示時にブラウザー ウィンドウの幅と高さ全体に表示する場合は、次のように CSS をやり直す必要があります。

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

inputこれにより、フィールドがユーザーのブラウザー ウィンドウと同じ高さと幅に引き伸ばされます。また、ブラウザー ウィンドウから各辺に 10 ピクセルの余白があります。

余白が必要な場合はbody、入力フィールドのスタイルまたはラッパー DIV でそれを設定します。

于 2009-07-25T07:51:26.747 に答える