Internet Explorer 6 và 7: các phần tử thả nổi mở rộng đến 100% chiều rộng khi chúng chứa phần tử con được thả nổi bên phải. Có cách giải quyết nào không?

Tôi đã có một phụ huynh div được thả nổi bên trái, với hai con div s mà tôi cần phải thả nổi bên phải.Internet Explorer 6 và 7: các phần tử thả nổi mở rộng đến 100% chiều rộng khi chúng chứa phần tử con được thả nổi bên phải. Có cách giải quyết nào không?

Phụ huynh div nên (nếu tôi hiểu thông số kỹ thuật chính xác) là rộng khi cần thiết để chứa con div s và đây là cách hoạt động của nó trong Firefox và cộng sự.

Trong IE, phụ huynh div mở rộng đến 100% chiều rộng. Điều này có vẻ là một vấn đề với các yếu tố nổi có con trôi nổi ngay. Trang kiểm tra:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0;float:left;"> 
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div> 
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div> 
</div> 
</body> 

</html>

Rất tiếc, tôi không thể sửa chiều rộng của trẻ div s, vì vậy tôi không thể đặt chiều rộng cố định trên bố mẹ.

Có cách giải quyết CSS chỉ để làm cho phụ huynh div rộng bằng con div s không?

Nguồn

2009-05-12 Paul D. Waite

đây là ví dụ rất hay về vấn đề là: http://css-class.com/test/css/visformatting/floats/floats-width-auto.htm –

Ooh có, trang kiểm tra tốt. –

Dưới đây là một giải pháp mà làm cho inline-block làm việc trên IE6 tại http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ để làm cho các yếu tố hành xử như phải nổi <div>s:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 

<title>Float with inline-block test</title> 

<style type="text/css"> 
    .container { 
     border-top: solid 10px green; 
     float: left; 
    } 

    .tester1, 
    .tester2 { 
     float: right; 
    } 

    .tester1 { 
     border-top: solid 10px blue; 
    } 

    .tester2 { 
     border-top: solid 10px purple; 
    } 
</style> 

<!--[if lte IE 7]> 
<style type="text/css"> 
    .container { 
     text-align: right; 
    } 

    .tester1, 
    .tester2 { 
     float: none; 
     zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */ 
    } 
</style> 
<![endif]--> 

</head> 

<body> 
<div class="container"> 
    <div class="tester1">Tester 1</div> 
    <div class="tester2">Tester 2</div> 
</div> 
</body> 
</html>

Nguồn

2010-05-04 06:21:44 cryo

Aha! Vâng, ý tưởng rất hay: 'inline-block' là mô phỏng gần hơn của phao. Chúng tôi vẫn còn tồn tại với vấn đề đặt hàng, nhưng trừ khi chúng tôi bỏ lỡ điều gì đó, không có cách nào không phải là JavaScript xung quanh vấn đề đó. Người chiến thắng! –

Ồ - tôi cũng sử dụng các nhận xét có điều kiện để mã sửa lỗi IE 7 và 6 chỉ được áp dụng trong IE 7 và 6. Tôi đã viết lại ví dụ của bạn cho phù hợp. Điều này tránh các vấn đề với 'inline-block' trong Firefox 2, và có nghĩa là tất cả IE sau 7 nhận được mã dựa trên' float' đúng. –

Công bằng đủ - Tôi đã cố gắng thêm 'float: right' vào DIV và' inline-block' vào vùng chứa nhưng điều đó không hoạt động trong IE6 - có vẻ như trôi nổi đã làm cho các phần tử có chiều rộng 100% không có vấn đề gì. Ồ, ít nhất, hiệu quả là có thể anyway :-P – cryo

Tôi không thể đưa ra giải pháp chỉ CSS phù hợp với yêu cầu của bạn, nhưng nếu bạn muốn sử dụng giải pháp JavaScript, có thể mã sau đây có thể trợ giúp? Tôi không thay đổi phong cách của các div, tôi chỉ thêm các ID main, sub1 và sub2 vào các div của bạn.

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth; 
document.getElementById('main').style.width = myWidth;

Nguồn

2009-05-12 10:49:02 Daan

Chắc chắn, điều đó sẽ làm việc JavaScript-khôn ngoan - mặc dù, nếu tôi đang đi xuống các tuyến đường JavaScript, tôi có thể kiểm tra xem kịch bản IE7 Dean Edwards 'cố định vấn đề cụ thể này (nó sửa chữa một bó của người khác). –

Điều gì về việc sử dụng bảng đơn thay vì div ngoài? Nó có thể cần một số công việc nhiều hơn để có tất cả mọi thứ liên kết đúng, nhưng bảng không mở rộng.

Nguồn

2009-05-12 11:01:13

Thật không may, bảng có vẻ như buộc các div con bọc, vì vậy chúng ở trên nhau thay vì từ bên này sang bên kia. –

OK, các bảng lồng nhau như thế nào? Bảng bên ngoài có phao: bên trái và một ô. Trong ô đó có một bảng bên trong với float: phải và hai ô. Trong mỗi một trong hai ô là nội dung của hai div bên trong của bạn. Nó liên quan nhiều hơn chỉ là các div, nhưng nó hoạt động (trên XP/IE7 của tôi, ít nhất). –

Ah, đạt được bố trí nằm ngang của các div con với một bảng. Chắc chắn là một khả năng, mặc dù về mặt kỹ thuật, bạn không có ý định sử dụng các bảng để bố trí (tôi nghĩ bạn đã thất bại trong Hướng dẫn trợ năng nội dung web nếu bạn làm). Ngoài ra, điều này thực sự cho một trang web có hai bố cục: một bố cục từ trái sang phải và một từ phải sang trái. Lý tưởng nhất là chúng tôi không muốn sửa đổi HTML cho các bố trí (ngoài việc có một lớp cho biết bố cục nào đang được sử dụng) và việc sử dụng các bảng sẽ chấm dứt điều đó. –

Something bạn có thể bắt đầu với là thế này:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;"> 
<DIV style="BORDER: #00c 10px solid;FLOAT: right;"> 
Tester 1 
</DIV> 
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;"> 
Tester 2 
</DIV> 
</DIV>

Kết quả của việc đó có vẻ là ít nhất là trong sân chơi bóng chày của những gì bạn đang tìm kiếm. Rõ ràng, bạn muốn tinh chỉnh nó cho nhu cầu của bạn, và có lẽ thêm một số logic css để chỉ áp dụng nó cho trình duyệt < IE 7.

Nếu đó không chính xác những gì bạn đang tìm kiếm, hãy thử chơi với một số lợi nhuận tiêu cực .

Nguồn

2009-05-13 16:24:31

Thật không may là dường như không hoạt động trên trang thử nghiệm của tôi: các div con bọc, vì vậy chúng nằm trên nhau thay vì từ bên này sang bên kia. Ngoài ra, ít nhất là trong IE 7, tỷ lệ 100% chiếm tất cả không gian có sẵn, do đó div cha mẹ được đặt bên ngoài cha mẹ của nó. –

whats với mũ? –

Đôi khi IE 6 không nghe đúng cách trừ khi bạn hét lên. –

Thứ nhất, tại sao bạn không sử dụng kiểu nội tuyến?

Tôi muốn sử dụng để nhắm mục tiêu IE với một file css riêng biệt:

<!--[if lt IE 7]> 
<link rel="stylesheet" href="ie6.css" type="text/css" /> 
<![endif]-->

Tôi biết đây không phải là một câu hỏi trực tiếp, nhưng IE là luôn luôn là một nỗi đau để đối phó với! Hầu hết các nhà thiết kế/nhà phát triển mà tôi biết sẽ tạo một bản định kiểu hoàn toàn mới cho IE.

Nguồn

2009-05-14 23:19:56

Yup, xin lỗi: mã ở trên chỉ là mã ví dụ để làm nổi bật lỗi. Tôi đã sử dụng các kiểu nội tuyến để làm cho nó dễ dàng hơn một chút để xem những gì đang diễn ra. –

Tôi đã đưa ra giải pháp sử dụng text-align: right và display: inline.

Hãy thử điều này:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="margin-top: 10px; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div> 
    </div> 
</div>

Thông báo tôi đã phải chuyển đổi thứ tự của các hộp "thử nghiệm" trong đánh dấu để hiển thị trong cùng một cách như ví dụ của bạn. Tôi nghĩ có một giải pháp thay thế lề trên vùng chứa mới, nhưng tôi không có thời gian để xem xét ngay bây giờ.

Nếu bạn muốn phong cách bụi cho tất cả các trình duyệt khác thử điều này:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="float: right;"> 
     <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; float: left;">Tester 1</div> 
    </div> 
</div>

Có một số vấn đề khác nhau mà có thể đưa ra khi bạn muốn bố trí những thứ xung quanh những hộp. Tuy nhiên, tôi nghĩ rằng những vấn đề đó sẽ dễ dàng hơn nhiều để giải quyết hơn cái này.

Hy vọng điều này hữu ích cho bạn.

Nguồn

2009-05-15 13:46:47 kaba

Bạn có thể muốn sử dụng 'inline-block' thay vì' inline'. –

inline-block không hoạt động trong ie6 – meo

@meo: không, nó không, nhưng nó có thể được mô phỏng với một vài cảnh báo: http://foohack.com/2007/11/cross-browser-support-for- inline-block-styling/ – cryo

Rất gọn gàng nhưng một giải pháp CSS duy nhất hoạt động tốt trong IE, chrome và FF.

Tôi lấy giải pháp của kaba - nhưng vấn đề là, nó hoạt động tốt trong IE nhưng tất cả các trình duyệt khác đều hiển thị khoảng trống 4px giữa 2 div con. Không gian vẫn là 4px ngay cả khi nội dung trên cả hai div đều mở rộng. Vì vậy, để sửa chữa mà tôi đã sử dụng IE điều kiện báo cáo. Tôi không giống như mã tốt nhất trên thế giới nhưng nó được hoàn thành công việc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0; float: left;"> 

    <div style="border-top:solid 10px #00c; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div> 

     <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px"> 

     <!--[if gte IE 5]> 
     <div style="border-top:solid 10px #00c; display: inline;margin-left:4px"> 
     <![endif]--> 

     Tester1 

     <!--[if gte IE 5]> 
     </div> 
     <![endif]--> 


     </div> 

    </div> 
</div> 
</body> 
</html>

Nguồn

2010-05-04 05:11:35 DMin

Tôi thấy bạn đang đi đâu; Tôi nghĩ rằng tôi thích giải pháp 'inline-block' cho IE mặc dù, vì nó giải quyết vấn đề khoảng cách mà không cần biên độ âm. –

tôi đã cùng một vấn đề và giải quyết trong bằng cách định vị trẻ phần tử (mà tôi muốn nổi bên phải) với vị trí: tuyệt đối và phải: 0. Tôi đã cho các yếu tố phụ huynh đủ đệm phải để nhường chỗ cho yếu tố con ... Giá trị một shot, có thể không hoạt động cho tất cả các ứng dụng!

Nguồn

2012-04-02 13:20:53 evilunix

Chắc chắn, đó là một cách giải quyết khác. Hoạt động tốt nếu bạn biết phần tử con sẽ rộng bao nhiêu. –

Internet Explorer 6 và 7: các phần tử thả nổi mở rộng đến 100% chiều rộng khi chúng chứa phần tử con được thả nổi bên phải. Có cách giải quyết nào không?

Trả lời

Các vấn đề liên quan