Hành vi nổi lạ trong IE7

Question

Tôi muốn tạo một hộp đơn giản với thanh tiêu đề chứa tiêu đề và một số nút công cụ. Tôi có đánh dấu sau:

<div style="float:left"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; width: 200px; background-color: red;">content</div> 
</div> 

này ám tốt trong Firefox và Chrome:

http://www.boplicity.nl/images/firefox.jpg

Tuy nhiên IE7 hoàn toàn messes lên và đặt yếu tố nổi ngay phía bên phải của trang:

http://www.boplicity.nl/images/ie7.jpg

Điều này có thể khắc phục được không?

Answer 1

Xác định chiều rộng trong div ngoài cùng. Nếu đó chiều rộng trong div nội dung của bạn có nghĩa đây là tổng chiều rộng của hộp của bạn, chỉ cần thêm nó vào div ngoài cùng, và (tùy chọn) loại bỏ nó từ nội dung, như thế này:

<div style="float:left; width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div> 

Answer 2

Hãy <div style="background-color:blue; padding: 1px; height: 20px;> này phụ huynh của 2 divs nổi cũng clear:all

Answer 3

Đây chỉ là một cách nhanh chóng câu trả lời, vì vậy tôi giơ tay lên nếu nó không hoạt động. Tôi nghĩ rằng giải pháp của Marko có thể sẽ hoạt động nếu bạn chỉ cần thêm chiều rộng tối thiểu chứ không phải chiều rộng. Nếu bạn đang cố gắng để phục vụ cho ie6 là tốt, bạn có thể cần phải sử dụng một hack, như chiều rộng tối thiểu không được hỗ trợ bởi ie6 và nó là hậu duệ.

Vì vậy, điều này sẽ hoạt động với IE7 và các trình duyệt hiện đại khác. Đặt chiều rộng tối thiểu thành bất kỳ thứ gì là thích hợp.

<div style="float:left; min-width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div> 

Answer 4

tôi cố định nó bằng cách sử dụng jQuery để bắt chước hành vi của các trình duyệt không phải IE:

// IE fix for div widths - size header to width of content 
    if (!$.support.cssFloat) { 
     $("div:has(.boxheader) > table").each(function() { 
       $(this).parent().width($(this).width()); 
     }); 
    } 

Answer 5

Hãy thử đặt position:relative; to-yếu tố phụ huynh và các yếu tố con. Nó giải quyết vấn đề cho tôi.

Answer 6

Đã biết gần đây rằng các phần tử nổi bên phải cần được nối với các div trước các phần tử khác. Đây là cách khắc phục dễ nhất mà không cần thêm một dòng thay đổi.

<div style="background-color:blue; padding: 1px; height: 20px;"> 
    <div style="float: right; background-color:green;">title</div> 
    <div style="float: left; background-color:yellow;">toolbar</div> 
</div>