textarea的寬度問題

我只想把textarea爲div，我認爲它不應該是一個問題：textarea的寬度問題

CODE

.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
</div>

這是一個非常困難的代碼，不是嗎？我們所有人都做了上千次。

由於某種原因，textarea的這個寬度在右側有錯誤。檢查盒子型號.panel似乎不錯。

在FF，Chrome，Edge中試用過，結果無處不在。

有人可以解釋我，爲什麼，它有什麼解決方案？

我製作了jsFiddle只是爲了好玩。

來源

2016-06-09 vaso123

問題是什麼？是因爲當你擴大文本區域時，它與容器重疊？如果是，只需將「overflow：hidden;」添加到面板。 –

我什麼都不想要。我只想修復textarea的右側。正如你所看到的，在右側沒有div的'10px'填充。 – vaso123

將'box-sizing：border-box;'添加到您的文本區域。 –

給<textarea>一個box-sizing: border-box應該修復它：

.panel { 
    width: 250px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    padding: 10px; 
} 

.panel textarea { 
    display: block; 
    box-sizing: border-box; 
    width: 100%; 
}

JSFiddle

我還添加了display:block到textarea的，以消除對文字區域的底部邊緣有些不一致（How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?）

來源

2016-06-09 13:55:34 Pandy

'display：block'沒有做任何事 – dippas

我將它設置爲'display：block;'以消除Firefox和Chrome添加到textareas底部的額外空間 - 儘管您是正確的，它與正確的填充問題。我會更新我的答案。 textarea填充不一致的參考：http://stackoverflow.com/questions/3453959/how-do-i-fix-inconsistent-textarea-bottom-margin-in-firefox-and-chrome – Pandy

你應該普遍適用box-sizing:border-box而不僅僅是div

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea, 
 
.panel input { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
    <input type="text" /> 
 
</div>

來源

2016-06-09 13:59:16 dippas

是的，很好 - 作爲一個規則大拇指我通常在我的CSS文件的開始處爲所有元素做一個「box-sizing：border-box」規則。我很少回到某些元素的'box-sizing'屬性的瀏覽器默認值。 –

而不是嘗試加入的0填充到您的文字區域，如箱大小的：邊界框的結果不同，在某些瀏覽器。

.panel textarea{ 
width: 100%; 
padding:0; 
}

來源

2016-06-09 14:02:58 frnt

發生這種情況是因爲默認textareas有填充和邊框。當你將寬度設置爲100％時，textarea實際上變爲100％+填充左/右+邊界左/右寬。將textarea設置爲box-sizing：border-box將使填充/邊框在指定寬度內而不是在其外部。

.panel textarea {width: 100%; box-sizing: border-box;}

這裏有一個直觀例子： https://css-tricks.com/examples/BoxSizing/

來源

2016-06-09 14:11:07 JeffreyPia

textarea的寬度問題

回答

相關問題