Textarea genişliği, içerdiği div ile hizalanmıyor

Question

Ben textarea içeren div ile hizalanmış kalmayı reddederek neden merak ediyorum?

<!-- the textarea pokes out--> 
<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

Bu elemanlar

Answer 1

Varsayılan olarak, çevresinde <textarea> öğesi bir kenarlıkla işlenir. Bununla ilgili sorun, bir öğeye width özelliğini ayarladığınızda, yalnızca genişlik değil, içerik genişliğini ayarlamanızdır. Öğenin toplam genişliği (genişlik + kenar + dolgu + kenar boşluğu)'u <textarea>'da% 100 olarak ayarladığınızda içerik genişliği'u 300 piksele ayarlar, ancak toplam genişlik 300px artı varsayılan sınırdır. Bu, 'un 300 piksel genişliğini aşmasına neden olur.

Sen dolgu/marjları kullanılarak <div> bu sınırları alabilecek edersiniz, ancak daha iyi bir çözüm kadar her şeyin toplam genişliğini tanımlamak için width özelliğini zorlamak için border-box için <textarea> üzerine box-sizing özelliğini ayarlamak olacaktır ve öğenin sınırı dahil.

tüm tarayıcılar (örn -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, vs.) farklı olarak ilan çünkü O mülk üzerinde biraz araştırma yapmanız gerekir

. Bakmanız için Here is the QuirksMode page on box-sizing.

Firefox için box-sizing düzeltme işleri çalışıyor, ancak başka tarayıcılarda test etmedim. Bazıları, özellikle de quirks/legacy modundayken, öğeye bir kenar boşluğu da uygulanabilir. Bu durumda, yapmanız gereken tek şey, kenar boşluklarını CSS ile kaldırmak olacaktır (AFAIK, kenar boşluklarına uzanan, yalnızca içerik, dolgu ve kenarlık için olanlar için box-sizing için geniş bir şekilde desteklenen bir seçenek yoktur).

Bu düzeltme ile spesifik olmak ve sadece sol/sağ kenar boşluklarını kaldırma öneririm

(yani margin-left: 0; margin-right: 0;) onlar ve siz (isterseniz varsa (yani margin: 0;) Herhangi alt/üst kenar boşluklarını korumak için oldukça tamamen marjları kaldırarak daha onları tutmak için). Firefox'un üst/alt kısma 1 piksellik bir marj uyguladığını ve diğer tarayıcıların da kullanılabileceğini biliyorum.

Answer 2

arasında uyumun sağlanmasında bana güçlük çıkaran ben Firefox, Chrome ve IE ve içinde hepsi düzgün gösterdiğini çalıştı. DIV'in başka bir konteynerin içinde olduğundan şüpheleniyorum ve bu da soruna neden oluyor.

Lütfen kodunuzun bir bölümünü ekleyin.

Answer 3

Tekstüre bir kenar boşluğu uygulanmış olabilir. Bu deneyin: Test

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%; margin: 0;"></textarea> 
</div> 

Answer 4

<div style="border:1px solid #ccc; width:300px"> 
    <textarea style="width:100%"></textarea> 
</div> 

Firefox 3.6.10, Internet Explorer 8 ve Google Chrome üzerinde çalışıyor.

Ama belki yerine DIV çevrelerdi, sen de bu deneyebilirsiniz: Orijinal koduyla aynı görünüyor hakkında sahiptir

<textarea style="border:1px solid #ccc; width:300px"></textarea> 

.