Float: div bên phải xuất hiện trên dòng tiếp theo trong IE chỉ

Question

Ok, vì vậy tôi đang làm việc trên mẫu thử nghiệm giao diện người dùng của mình trước khi tôi bắt đầu mã hóa webapp. Tôi nhận được thiết kế chủ yếu được thực hiện trong khi làm việc trong Firefox và (tất nhiên) khi tôi thử nghiệm nó trong IE, đã có rất nhiều vấn đề dựng hình. Một trong những vấn đề đó là nếu tôi có một div chứa một số văn bản và một div khác được thiết lập để nổi: phải, div lồng nhau đó xuất hiện trên dòng tiếp theo, bên dưới div cha của nó. Đây là đánh dấu vấn đề trong dạng đơn giản nhất ...

<div style="background-color:red;"> 
    Text 
    <div style="background-color:yellow; float:right;">Right</div> 
</div> 

tôi scoured internet cho các giải pháp và giải pháp duy nhất làm việc có liên quan tôi thấy rằng làm công việc này trong IE là đặt div nổi vào đầu của nó cha mẹ như thế này ...

<div style="background-color:red;"> 
    <div style="background-color:yellow; float:right;">Right</div> 
    Text 
</div> 

Trong thực tế, div lồng nhau có lớp và CSS của tôi đang thả nổi lớp đó. Nhưng điều gì sẽ xảy ra nếu tôi cuối cùng tạo một biểu định kiểu khác để nhắm mục tiêu thiết bị di động và tôi không còn muốn div bên trong đó được thả nổi nữa? Sau đó, bản thân nội dung sẽ không theo thứ tự trong HTML, chỉ vì mục đích chứa một vấn đề CSS trong IE. Có cách nào tốt hơn để giải quyết vấn đề này không?

Answer 1

Một đồng nghiệp của tôi gần đây đã có một vấn đề rất giống nhau. Tôi khuyên bạn chỉ nên sử dụng định vị chứ không phải là thả nổi. Tôi tin rằng bạn có thể thực hiện tương tự tại đây:

<div style="background-color:red; position:relative;"> 
    Text 
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div> 
</div> 

Tôi không biết bạn có yêu cầu sử dụng phao nổi hay không. Sử dụng phương pháp định vị sẽ làm cho phần tử vị trí không chiếm không gian trong luồng thông thường, nhưng nếu không giữ đúng thứ tự nguồn và hoàn thành trực quan những gì tôi nghĩ bạn muốn làm.

Answer 2

Tôi không chắc chắn nếu nó là một khả năng cho bạn, nhưng đặt văn bản trong div bên ngoài trong một div của riêng nó dường như giải quyết vấn đề

<div style="background-color:red;"> 
    <div style="float: left;">Text</div> 
    <div style="background-color:yellow; float:right;">Right</div> 
</div> 

Answer 3

Đặt một giá trị chiều rộng trên div bên trong của bạn và làm cho nó hiển thị: inline-block. Div là các phần tử khối có độ rộng 100% của bố mẹ, đó là lý do tại sao IE đặt nó trên dòng tiếp theo.

Answer 4

Tôi vừa mới gặp sự cố này trong IE7 - trong trường hợp của tôi, mục sẽ xóa dấu phẩy sẽ có chiều rộng đầy đủ. Tôi chỉ đặt nó là "float: none; clear: left" và nó có vẻ hoạt động.