html - 缩放时形状变形

Question

我有一个包含两个输入元素和一个文本区域的表单。当我放大/缩小对象的大小时，会发生变化。有没有办法阻止这种行为？在 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 为输入和 textarea 字段提供相等的绝对（px）或相对（em）宽度。IE

input,
textarea {
    width: 15em;
}

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