缩放时形式扭曲

Question

我有一个带有两个输入元素和一个textarea的表单。当我放大/缩小对象的大小时会发生变化。有没有办法阻止这种行为？ 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;
}

结果：

Answer 1

使用size / cols属性停止样式元素宽度并改为使用CSS：

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

http://jsfiddle.net/Vrd2q/

Answer 2

这可能是因为输入大小是用em计算的，相对于font-size（随着不同的缩放级别而变化）。尝试以绝对单位指定宽度，例如px。

Answer 3

阻止人们放大或缩小是一种可用性笨蛋。不要使用标记属性'size'和'cols'（删除那些属性，如@MarcinJuraszek所提到的），但使用CSS为input和textarea字段提供相等的绝对（px）或相对（em）宽度。即。

input,
textarea {
    width: 15em;
}

在em（可以说是首选）的情况下，字段的宽度将根据缩放因子进行缩放，但至少它们都将缩放相同。