Pertanyaan css: masalah dengan lebar dan padding dari input di IE


Saya mengalami masalah dengan lebar pada bidang input [text] di IE, semua versi.

Saya memiliki div dengan lebar 250px yang ditetapkan secara eksplisit. Di div ini, saya memiliki kolom input teks dengan lebar diatur ke 100%. Masukan ini juga memiliki bantalan kiri internal 10px.

Di IE, itu membuat lebar sebagai 100% + 10px. Saya tidak dapat menemukan teknik untuk membatasi lebar pada wadah.

Masalah ini awalnya terjadi di semua browser, tetapi sangat mudah diperbaiki di FF, Safari, dan Chrome dengan menambahkan lebar maksimum: 100%. IE6 / 7 tidak mendukung ini, sementara IE8 tidak tetapi juga masih menambahkan padding dengan lebar.

Saya mengerti bahwa model kotak IE mencakup batas dan margin dalam perhitungan lebarnya, jadi dengan yang diberikan sebagai dipahami saya masih tidak bisa mencari jalan di sekitar ini.

Saya juga mencoba untuk menemukan solusi yang lebih baik daripada hanya mengatur lebar masukan saya menjadi 240px dengan padding, karena ada berbagai masukan dalam bentuk ini yang kontainer bervariasi dalam ukuran dan saya ingin mencari solusi universal.

Berikut beberapa kode:

<div class="places_edit_left">
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="phoneNumber"/>

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="address"/>
</div>

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

5
2017-07-23 22:19


asal


Jawaban:


Solusi terbaik: Solusi nyata

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

Yang ini akan berfungsi untuk IE8 + dan tentu saja semua browser modern lainnya

Solusi jelek, tetapi bekerja juga di IE yang lebih tua: Sini


6
2017-11-15 12:06



  1. Model kotak yang salah berlaku untuk IE dalam mode quirks. Oleh karena itu, Anda mungkin perlu memicu mode ketat. Lihat mis. http://www.quirksmode.org/css/quirksmode.html

  2. Anda ingin membuat masukan selebar wadahnya? Setel lebar secara explicitely (250px - 10px untuk padding - XXpx untuk batas). Anda ingin agar input tidak lebih lebar dari div? Atur overflow agar div disembunyikan.


2
2017-07-23 22:28



Tidak menghitung masalah max-width, IE melakukan hal yang benar di sini. Model kotak CSS mengatakan bahwa ukuran keseluruhan elemen adalah lebar PLUS padding-nya, PLUS margin-nya.

Model kotak juga mengatakan bahwa untuk setiap elemen tingkat blok yang tidak mengambang, seluruh ukuran elemen (termasuk semuanya) selalu 100% dari elemen yang mengandung. Anda dapat menggunakan ini untuk keuntungan Anda dengan mengatur lebar kotak input Anda menjadi "otomatis", dan kemudian mengatur paddings Anda, perbatasan, dan margin secara eksplisit.

Berikut ini contoh kecil (saya tahu ini banyak markup, tapi ini sedikit berlebihan untuk mengilustrasikan poinnya),

.places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}

0
2017-07-23 22:40



Periksa ini: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html Saya telah mengikuti solusi kedua.


0
2018-04-22 15:27