Phần tử con có tỷ lệ phần trăm theo chiều rộng được bố trí tuyệt đối trên Internet Explorer 7

Tôi có một vị trí tuyệt đối divchứa một vài đứa trẻ, một trong số đó là một vị trí tương đối div. Khi tôi sử dụng một percentage-based widthđứa trẻ div, nó sẽ sụp đổ 0 widthtrên IE7, nhưng không phải trên Firefox hay Safari.

Nếu tôi sử dụng pixel width, nó hoạt động. Nếu cha mẹ tương đối được định vị, chiều rộng phần trăm trên con hoạt động.

1. Có điều gì tôi đang thiếu ở đây?
2. Có một sửa chữa dễ dàng cho điều này ngoài pixel-based widthđứa trẻ?
3. Có một khu vực của đặc tả CSS bao gồm điều này?

Cha mẹ divcần phải có một định nghĩa width, bằng pixel hoặc theo phần trăm. Trong Internet Explorer 7, cha mẹ divcần một widthphần trăm con xác định divđể hoạt động chính xác.

Đây là một số mã mẫu. Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm. Dưới đây hiển thị giống hệt nhau trong Firefox 3 (mac) và 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 trước 8 có một khía cạnh tạm thời đối với mô hình hộp của nó mà đáng chú ý nhất là tạo ra một vấn đề với độ rộng dựa trên tỷ lệ phần trăm. Trong trường hợp của bạn ở đây, một vị trí tuyệt đối divtheo mặc định không có chiều rộng. Chiều rộng của nó sẽ được tính toán dựa trên chiều rộng pixel của nội dung và sẽ được tính sau khi nội dung được hiển thị. Vì vậy, tại thời điểm đó, IE gặp và kết xuất vị trí tương đối của bạn, divcha mẹ của nó có chiều rộng bằng 0 do đó tại sao nó tự sụp xuống 0.

Nếu bạn muốn có một cuộc thảo luận sâu hơn về vấn đề này cùng với rất nhiều ví dụ hoạt động, hãy có một người thích ở đây .

Tại sao không phải là phần trăm chiều rộng con trong cha mẹ được định vị tuyệt đối làm việc trong IE7?

Bởi vì đó là Internet Explorer

Có điều gì tôi đang thiếu ở đây?

Đó là, để nâng cao nhận thức của đồng nghiệp / khách hàng của bạn rằng IE tệ.

Có một sửa chữa dễ dàng bên cạnh chiều rộng dựa trên pixel trên con?

Sử dụng emcác đơn vị vì chúng hữu ích hơn khi tạo bố cục lỏng vì bạn có thể sử dụng chúng cho phần đệm và lề cũng như kích thước phông chữ. Vì vậy, không gian màu trắng của bạn phát triển và thu nhỏ tỷ lệ với văn bản của bạn nếu nó được thay đổi kích thước (đó thực sự là những gì bạn cần). Tôi không nghĩ rằng tỷ lệ phần trăm kiểm soát tốt hơn so với EMS; không có gì ngăn cản bạn chỉ định hàng trăm phần trăm (0,01 em) và trình duyệt sẽ diễn giải khi thấy phù hợp.

Có một khu vực của đặc tả CSS bao gồm điều này?

Không, theo như tôi nhớ em, và% chỉ dành cho kích thước phông chữ ở CSS 1.0.

Tôi nghĩ rằng điều này có liên quan đến cách thức hasLayouttriển khai tài sản trong trình duyệt cũ hơn.

Bạn đã thử mã của mình trong IE8 để xem có hoạt động trong đó không? IE8 có Debugger ( F12) và cũng có thể chạy ở chế độ IE7.

Các divnhu cầu phải có chiều rộng xác định:

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