1

HTML フォームの 1 つで、テキスト入力フィールドが切り取られている問題に気付きました。その原因を、ページ上部で使用している <!DOCTYPE html> ディレクティブに絞り込みました。

<!DOCTYPE html> ディレクティブを除外すると、以下のシナリオの入力が正しくレンダリングされます。つまり、テキスト入力フィールド全体が描画されます。しかし、このスニペットをそのまま (<!DOCTYPE html> を使用して) 読み込むと、テキスト入力の右側が切り取られます。

ここで何が起こっているのか、誰か説明してもらえますか? この問題は、IE9、Firefox 23、および Chrome 29 で発生します。

スニペットは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#testDiv span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
#testInput {
    width: 100%;
}
#testButton {
    float: right;
}
</style>
</head>
<body>
    <form id="testForm" method="post">
        <div id="testDiv"> 
            <button id="testButton">Apply</button>             
            <span><input type="text" id="testInput" /></span>
        </div>
   </form> 
</body>
</html>
4

2 に答える 2

0

doctype が wi​​dth:100% を解釈する方法だと思うので、右の境界線のためのスペースが残っていません。必要に応じて width:99.9% に変更できます。

于 2013-09-12T20:11:27.557 に答える