Phần tử con có chiều rộng phần trăm trong bố mẹ hoàn toàn được định vị trên Internet Explorer 7

Question

Tôi có một vị trí tuyệt đối div chứa một số trẻ em, một trong số đó là một vị trí tương đối div. Khi tôi sử dụng chiều rộng dựa trên phần trăm trên con div, nó thu hẹp thành '0' chiều rộng trên Internet Explorer 7, nhưng không phải trên Firefox hoặc Safari.

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

1. Có điều gì tôi thiếu ở đây không?
2. Có cách khắc phục dễ dàng cho điều này ngoài chiều rộng pixel dựa trên trên con số không?
3. Có khu vực đặc tả CSS bao quát điều này không?

Answer 1

Phụ huynh div cần phải được định nghĩa , theo pixel hoặc theo phần trăm. Trong Internet   Explorer   7, phụ huynh div cần một số width được xác định cho tỷ lệ phần trăm con div s hoạt động chính xác.

Answer 2

Dưới đâ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. Các màn hình sau đây 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>

Answer 3

IE trước 8 có một khía cạnh thời gian để mô hình hộp của nó mà đáng chú ý nhất tạo ra một vấn đề với độ rộng dựa trên phần trăm. Trong trường hợp của bạn ở đây, vị trí tuyệt đối theo mặc định là div 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 toán sau khi nội dung được hiển thị. Vì vậy, tại thời điểm IE gặp và ám tương đối của bạn div cha mẹ của nó có chiều rộng bằng 0 do đó nó tự sụp đổ xuống 0.

Nếu bạn muốn thảo luận sâu hơn về điều này cùng với nhiều ví dụ làm việc, có một gander here.

Answer 4

Tại sao tỷ lệ phần trăm chiều rộng trẻ em trong công việc mẹ hoàn toàn vị trí trong IE7?

Bởi vì đó là Internet khai phá

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

Tức là, nâng cao nhận thức của đồng nghiệp/khách hàng của bạn mà IE hút.

Có cách khắc phục dễ dàng ngoài chiều rộng dựa trên pixel trên con không?

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

Có khu vực đặc tả CSS bao gồm điều này không?

Không, theo tôi nhớ em và% được dành cho kích thước phông chữ một mình trở lại ở CSS 1.0.

Answer 5

Tôi nghĩ rằng điều này có liên quan đến cách thức thuộc tính hasLayout được triển khai 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ó Trình gỡ lỗi (F12) và cũng có thể chạy ở chế độ IE7.