Naprawianie problemu z zaokrąglaniem subpikseli w sieci płynów CSS

Próbuję utworzyć płynną siatkę CSS, działa ona w przeglądarkach Firefox i IE8 +, ale NIE w Safari/Chrome/Opera, gdzie staje się widoczny problem z zaokrąglaniem podpikseli:Naprawianie problemu z zaokrąglaniem subpikseli w sieci płynów CSS

http://jsfiddle.net/bJKQ6/2/

.column { 
    float: left; 
    width: 25%; 
}

głównego pojemnika ma szerokość 100%, a jeśli zmiany rozmiaru przeglądarki Safari/Chrome/Opera można zobaczyć, jak zaokrąglone szerokości są niespójne.

Po obszernych odczytach dotyczących problemu zrozumiałem, że "nie ma dobrego ani złego rozwiązania" w przypadku zaokrąglania podpikselowego, ale sposób przeglądarki Firefox wydaje mi się najlepszym kompromisem. (Na przykład, jeśli ustawię 4 elementy div o szerokości 25%, spodziewam się, że pokryty obszar będzie wynosił 100%.)

Chciałbym wiedzieć, czy istnieje tylko rozwiązanie CSS, które przeoczyłem, lub alternatywnie JavaScript, aby rozwiązać problem.

Dzięki!

AKTUALIZACJA: Od maja 2014 r. Chrome 33 i Safari 7 wydają się korzystać z "drogi do Firefoksa".

Źródło

2012-03-09 gyo

Odpowiedziałem na podobne pytanie kilka dni temu tutaj http://stackoverflow.com/questions/9914209/css-browser-pixel-rounding-overflow-hidden- with-percentages/9942854#9942854 a to się nie kończy we wszystkich elementach dokładnie tej samej szerokości, prawdopodobnie jest tak blisko, jak to się stanie bez javascript. –

Dzięki za odpowiedź. Chciałbym pozbyć się owijki w "rzędzie", aby mieć większą elastyczność, dodałem kolejny przykład w skrzypcach pokazujący galerię kciuków bez konieczności zawijania każdego rzędu. – gyo

ramy OOCSS Stubbornella'S (linki poniżej) siatki oferty moduł ten dając ostatniej kolumnie następujące przesłonięcia:

float: none; 
overflow: hidden; 
width: auto;

Pozwala ona zajmować co szerokość pozostaje w pojemniku.

Trochę przeglądarkę rozwidlającą (IE, ptzsch ...) jest konieczne, aby uzyskać ten sam problem: https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids

Źródło

2012-09-11 14:23:57 Barney

Dziękuję Barney, jedyną wadą jest ostatnia klasa Untit, która jest mało elastyczna. – gyo

Wiem, co masz na myśli - osobiście uważam, że nazwy klas strukturalnych są niezbędnym składnikiem elastycznego HTML, ale to znaczy, że dodajesz go dużo. Powiedziawszy to, możliwe jest uniknięcie sporej części dodatkowych klas, jeśli " gotowi zrezygnować z obsługi tych przeglądarek, które nie obsługują zaawansowanych selektorów CSS 2.1: zastąp odniesienia do 'unit' za pomocą' .line> * 'i' .lastUnit' z '.line> *: last-child'. – Barney

Hej @gyo, stworzyłem demo powyższego tutaj: http://jsfiddle.net/barney/7Bd8V/, następnie poszedłem o krok dalej i usunąłem wszystko poza klasą 'line', dla rozebranego przypadku, gdzie zakładamy, że wszystkie szerokości ułamkowe chcą mieć równą szerokość: http://jsfiddle.net/barney/32Q8B/ – Barney

to jest do bani, że nie jest to dobra metoda na to, że będzie zaokrąglić pikseli w górę iw dół dla każdej przeglądarki, ale w zamian za to, że zwykle zrobić:

.nested:last-child { 
    float: right; 
} 
.nested:first-child { 
    float: left; 
}

to będzie unosić się ostatnie dziecko w prawo tak px unalignment nie jest oczywista, ale jeśli jest to jedyny element (powiedzmy div że ma szerokość 33%), a następnie będzie nadal unosić się w lewo.

Źródło

2013-05-15 16:57:11 Cory

Ten sam problem, co ja tutaj definiuję : htt p: //stackoverflow.com/questions/9635347/fixing-sub-pixel-rounding-issue-in-a-css-fluid-grid/12371926#comment23915801_12371926 Jeśli element musi spaść do następnej linii, jest pływający dobrze. Myślę, że jedynym właściwym rozwiązaniem musi być użycie preprocesora i użycie ceil() i floor() (Stylus, ale SCSS ma odpowiedniki) dla każdego elementu wraz z prefiksem dostawcy, aby zaokrąglić w odpowiednim kierunku. Złożę raport, jeśli coś wymyślę ... – Cory

Naprawianie problemu z zaokrąglaniem subpikseli w sieci płynów CSS

Odpowiedz

Powiązane problemy