1

2 つの入力要素とテキストエリアを持つフォームがあります。ズームイン/ズームアウトすると、オブジェクトのサイズが変わります。この動作を停止する方法はありますか? 100% ズームでは問題ないように見えますが、ブラウザを 90% ズームまたは 110% ズームで使用すると、歪んだように見えます。

<table class="upload" cellpadding="0">
    <tr>
        <td>
                <p><b>Name:</b></p>
        </td>
        <td>
                <input type="text" name="appname" size="50" maxlength="32">
        </td>
   </tr>
    <tr>
        <td>
            <p><b>Age:</b></p>
        </td>
        <td>
                <textarea  name="adtext" cols="39" rows="2" maxlength="75" style="resize: none;"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <p><b>Website:</b></p>
        </td>
        <td>
            <input type="text" name="marketlink" size="50" maxlength="254">
        </td>
        <td>
            <button type="button" onclick="drawAd()">Test link</button>
         </td>
    </tr>
</table>

CSS:

table.upload {
 border-spacing:0;
  border-collapse:collapse;

}
table.upload td {
border:0px solid black;
margin:0;
padding:0;
}
table.upload td input{
outline: #388c91;
margin-left:4px;
}

table.upload td textarea{
margin-left:4px;
}

結果：

ここに画像の説明を入力

4

3 に答える 3

1

Stop styling elements width using size/cols attributes and use CSS instead:

table.upload td input, table.upload td textarea {
    width: 250px;
}

http://jsfiddle.net/Vrd2q/

于 2013-03-10T09:08:51.053 に答える
0

That's probably because the input sizes are being calculated with em which is relative to the font-size (that changes with different zoom levels). Try specifying the width in a absolute unit, such as px.

于 2013-03-10T09:08:07.337 に答える
0

人々がズームインまたはズームアウトできないようにすることは、ユーザビリティブーブーです。タグ属性 'size' と 'cols' を使用しないでください (@MarcinJuraszek が述べたように、これらの属性を削除してください)。ただし、CSS を使用して、input フィールドと textarea フィールドに等しい絶対 (px) または相対 (em) 幅を指定します。いえ

input,
textarea {
    width: 15em;
}

em の場合 (間違いなく好まれます)、フィールドの幅はズーム倍率に応じてスケーリングされますが、少なくともそれらはすべて同じようにスケーリングされます。

于 2013-03-10T09:21:16.360 に答える