Tôi có div chứa chứa hai mục: a .button và .box với văn bản bên trong. .button đến trước và được thả nổi bên phải. .box không có float [đây là một ràng buộc - tôi không thể trôi nổi nó do các cấu trúc khác tương tự phụ thuộc vào không có float]. .box có overflow: hidden; để thiết lập bối cảnh định dạng khối mới. Điều này cho phép .box kéo dài "100% tối đa" phần tử thả nổi trước, .button.Firefox ngắt dòng bất ngờ bằng cách sử dụng nổi & tràn ẩn
.outer-container chứa tất cả những thứ này và được thả nổi bên phải.
Trong Chrome (26.0.1410.12 beta-m PC, Mac 25.0.1364.99), Safari (6.0.2 Mac), và IE8-9, điều này sẽ hành động một cách mong muốn. Văn bản của .box nằm trên một dòng và do phao phải của .outer-container, sẽ chính xác với kích thước cần thiết. Tuy nhiên, trong Firefox, văn bản được chia thành một dòng khác.
Tôi cũng tìm thấy một vấn đề tương tự khi .button là thay vì lưu hành trái - Tôi nhận được mong muốn hành vi trong tất cả mọi thứ trừ cho Firefox.
Tôi đã xem Firefox 16.0.1 và 19.0 cho PC và 18.0.1 và 19.0 cho Mac. Đây có phải là một lỗi?
Điều này hoạt động chính xác với mục đích của Fiddle gốc, nhưng tiếc là nó không chính xác những gì tôi đang tìm kiếm, vì tôi cần "thùng chứa bên ngoài" linh hoạt hơn một chút. Nếu '.outer-container' không được thả nổi,' .box' sẽ vẫn còn "100% lên đến" phần tử được lưu trước đó vì 'overflow: hidden;', trong khi toàn bộ điều đó kéo dài 100%. [imgur] (http://i.imgur.com/MLtLMjp.png), [new Fiddle không có inline-block] (http://jsfiddle.net/6qAwA/11/) – Chris
OK .. Tôi cho rằng trong trường hợp có một '.box', tôi có thể gặp ở giữa và sử dụng một bộ chọn cụ thể hơn để thêm' display: inline-block; '. [new Fiddle] (http://jsfiddle.net/6qAwA/16/). Nó vẫn còn lạ mặc dù, và tôi không biết rằng sửa chữa này làm cho vấn đề có vẻ như bất kỳ ít hơn của một lỗi trong FF. – Chris