Elemen persentase lebar anak di induk yang benar-benar diposisikan di Internet Explorer 7

Saya memiliki posisi yang benar-benar divberisi beberapa anak, salah satunya adalah posisi yang relatif div. Ketika saya menggunakan percentage-based widthpada anak div, itu runtuh ke 0 widthIE7, tetapi tidak pada Firefox atau Safari.

Jika saya gunakan pixel width, itu berfungsi. Jika posisi induk relatif, persentase lebar pada anak bekerja.

1. Apakah ada sesuatu yang saya lewatkan di sini?
2. Apakah ada perbaikan yang mudah untuk ini selain pixel-based widthpada anak?
3. Apakah ada area spesifikasi CSS yang mencakup ini?

Orang tua divharus memiliki yang ditentukan width, baik dalam piksel atau sebagai persentase. Di Internet Explorer 7, orang tua divperlu ditentukan widthagar persentase anak divs berfungsi dengan benar.

Ini beberapa contoh kode. Saya pikir ini yang Anda cari. Berikut ini menampilkan persis sama di Firefox 3 (mac) dan IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

IE sebelum ke 8 memiliki aspek temporal untuk model kotaknya yang paling menonjol menciptakan masalah dengan lebar berbasis persentase. Dalam kasus Anda di sini posisi yang benar-benar divsecara default tidak memiliki lebar. Lebarnya akan dikerjakan berdasarkan lebar piksel dari kontennya dan akan dihitung setelah konten diberikan. Jadi pada intinya, IE menjumpai dan merender posisi divinduk Anda yang relatif memiliki lebar 0 maka mengapa ia sendiri runtuh ke 0.

Jika Anda ingin diskusi yang lebih mendalam tentang ini bersama dengan banyak contoh kerja, silakan lihat di sini .

Mengapa persentase lebar anak di induk yang benar-benar diposisikan bekerja di IE7?

Karena itu Internet Explorer

Apakah ada sesuatu yang saya lewatkan di sini?

Yaitu, untuk meningkatkan kesadaran rekan kerja / klien Anda bahwa IE menyebalkan.

Apakah ada perbaikan yang mudah selain lebar berbasis piksel pada anak?

Gunakan emunit karena mereka lebih berguna saat membuat tata letak cair karena Anda dapat menggunakannya untuk padding dan margin serta ukuran font. Jadi ruang putih Anda tumbuh dan menyusut secara proporsional ke teks Anda jika diubah ukurannya (yang benar-benar yang Anda butuhkan). Saya tidak berpikir persentase memberikan kontrol yang lebih baik daripada mereka; tidak ada yang menghentikan Anda menentukan dalam ratusan ems (0,01 em) dan peramban akan menafsirkan sesuai keinginan.

Apakah ada area spesifikasi CSS yang mencakup ini?

Tidak ada, sejauh yang saya ingat emdan% 's dimaksudkan untuk ukuran font saja di CSS 1.0.

Saya pikir ini ada hubungannya dengan cara hasLayout properti diimplementasikan di browser yang lebih lama.

Sudahkah Anda mencoba kode Anda di IE8 untuk melihat apakah berfungsi di sana juga? IE8 memiliki Debugger ( F12) dan juga dapat berjalan dalam mode IE7.

The divkebutuhan untuk memiliki lebar didefinisikan:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>