Niespodziewane łamanie wiersza w programie Firefox za pomocą obiektów pływających i przepełnienie ukryte

Mam pojemnik div zawierający dwa elementy: a .button i .box z tekstem w środku. .button jest na pierwszym miejscu i jest pływający w prawo. .box nie ma float [jest to ograniczenie - nie mogę go unosić w lewo z powodu podobnych innych struktur, które zależą od tego, że nie ma float]. .box ma overflow: hidden;, aby ustanowić nowy kontekst formatowania bloków. To pozwala .box rozpiętości "100% do" poprzedniego elementu pływającego, .button.Niespodziewane łamanie wiersza w programie Firefox za pomocą obiektów pływających i przepełnienie ukryte

Dom wszystkie te i jest pływak prawy.

http://jsfiddle.net/6qAwA/5/

W Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac), a IE8-9, to będzie działać w pożądany sposób. Tekst w postaci .box pozostaje w jednym wierszu, a ze względu na prawy float .outer-container będzie dokładnie taki, jakiego potrzebuje. W Firefoksie tekst jest jednak podzielony na inną linię.

Uważam też podobny problem gdy .button jest zamiast zadokowanej lewej - dostaję pożądane zachowanie we wszystkim z wyjątkiem Firefox.

Widziałem Firefoksa 16.0.1 i 19.0 na PC oraz 18.0.1 i 19.0 na Maca. Czy to błąd?

Źródło

2013-02-27 Chris

Dodaj display: inline-block; do .box:

Demo

Źródło

2013-02-27 01:32:32 Adrift

To działa dokładnie w celu oryginalnego skrzypka, ale niestety nie jest to dokładnie to, czego szukam, ponieważ potrzebuję "zewnętrznych pojemników", aby być trochę bardziej elastycznym. Jeśli '.outer-container' nie był unoszony,' .box' powinien nadal zawierać "100% do" poprzedniego elementu pływającego z powodu 'overflow: hidden;', podczas gdy cała sprawa obejmuje 100%. [imgur] (http://i.imgur.com/MLtLMjp.png), [nowe Fiddle bez wbudowanego bloku] (http://jsfiddle.net/6qAwA/11/) – Chris

Mam to .. Przypuszczam, że w W przypadku posiadania jednego '.box', mogę spotkać się w środku i użyć bardziej szczegółowego selektora, aby dodać' display: inline-block; '. [nowe Fiddle] (http://jsfiddle.net/6qAwA/16/). Wciąż jest to dziwne i nie wiem, że ta poprawka sprawia, że problem wydaje się być mniejszym błędem w FF. – Chris

Faktycznie, kiedy idziesz na rozwiązanie jak http://jsfiddle.net/Volker_E/x5rPd/ nie trzeba drugi div dla pożądanego zachowania.

Źródło

2013-02-27 02:16:17

Ma to również sens w przypadku pierwotnego problemu, ale do celów projektu, nad którym pracuję, wymagany jest element blokowy. – Chris

natknąłem tej kwestii dzisiaj gdzie pływający węzeł złamie linię tylko w Firefoksie nawet po ustawieniu jej display do inline-block a powodem tego było to, że węzeł pojemnik miał ustawienie stylu z white-space zestaw do nowrap . Tak więc resetowanie wartości white-space do normal na węźle kontenerowym rozwiązało dla mnie ten problem.

Źródło

2013-08-07 11:02:43

To zadziałało dla mnie - element pojemnika był przyciskiem i ustawienie go na "white-space: normal" naprawił problem. Dzięki! –

Działa. Ale dlaczego? zwłaszcza, że wydaje się szalone, że nowrap sprawia, że jest on zawijany do następnej linii ... –

Jeśli potrzebujesz 'nowrap' do swojego pojemnika, to proponuję to rozwiązanie: http://stackoverflow.com/a/26306907/2550529 – SepehrM

white-space: normal nie załatwiłem za mnie. To, co zadziałało, to white-space: nowrap; na bezpośrednim kontenerze tekstowym.

Źródło

2014-07-30 12:20:53 montagproject

Niespodziewane łamanie wiersza w programie Firefox za pomocą obiektów pływających i przepełnienie ukryte

Odpowiedz

Powiązane problemy