變形時形成扭曲

我有一個具有兩個輸入元素和一個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; 
}

結果：

enter image description here

來源

2013-03-10 erdomester

停止造型元素使用size/cols屬性width和使用CSS來代替：

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

http://jsfiddle.net/Vrd2q/

來源

2013-03-10 09:08:51 MarcinJuraszek

謝謝！我沒有想到這個！ – erdomester 2013-03-10 09:24:12

這可能是因爲輸入的尺寸正在與em計算其相對於font-size（與不同的縮放變化水平）。嘗試在絕對單位中指定寬度，例如px。

來源

2013-03-10 09:08:07

阻止人們能夠在放大或縮小的可用性BOOBOO。不要使用標籤屬性'size'和'cols'（像@MarcinJuraszek提到的那樣去掉那些屬性），但是使用CSS來爲輸入和textarea字段賦予相等的絕對（px）或相對（em）寬度。即

input, 
textarea { 
    width: 15em; 
}

在EM的情況下（其可以說者優先），字段的寬度將根據縮放因子縮放，但至少它們將全部刻度相同。

來源

2013-03-10 09:21:16 Vivienne

變形時形成扭曲

回答

相關問題