2012-05-23 13 views
7

Zacznę opracowywać nową stronę internetową i przygotowuję się do pracy z różnymi metodami używanymi przez przeglądarki do obliczania szerokości i wysokości elementów (box model stuff). W jakiś sposób przyszło mi do głowy: co, jeśli po prostu zastosuję box-sizing do wszystkich elementów na stronie?* {Rozmiar pudełka: ramka-ramka; }: Do ramki border-box, czy nie do ramki, wszystkie elementy?

Jestem jednym z tych, którzy uważają, że box-sizing: border-box; jest jednym z najlepszych poleceń w CSS, ze wszystkimi jego ograniczeniami. Jednakże te same ograniczenia są tymi, którzy sprawiają, że zastanawiam się, czy należy zastosować box-sizing do wszystkich elementów:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 

Oczywiście moja strona powinna być zgodna z takim przeglądarek, jak to możliwe, a box-sizing tworzy kilka pytań, kiedy pomyśl o IE7-. Czasami jednak harmonogram jest tak krótki, że byłoby wspaniale zyskać kilka dodatkowych minut, nie przejmując się tym konkretnym problemem.

W każdym razie, czy stosowanie box-sizing:border-box; do wszystkich elementów jest dobrą zasadą, czy też powinienem to robić tylko dla elementów, które rzeczywiście tego potrzebują?

+2

Jestem również jednym dla border-box. Możesz również przeczytać to również http://paulirish.com/2012/box-sizing-border-box-ftw/ – Ana

Odpowiedz

8

Myślę, że to świetny pomysł. W rzeczywistości zacznę robić to samo na moich stronach internetowych.

Tutaj Paweł mówi o używaniu go w tym samym fasonie

http://paulirish.com/2012/box-sizing-border-box-ftw/

Używamy * {box-sizing: border-box;} w jednym z moich projektów (wdrożonej w produkcji, średnio ponad 1mln wizyt miesięcznie) w pracy od około roku, i wydaje się, że trzyma się dobrze. Projekt został przetestowany w IE8 & 9 i najpopularniejsze wersje Firefox i Chrome i nie mieliśmy żadnych problemów. Wszystkie obliczenia jQuery (+ UI) offset i animacje działają dobrze, nawet w każdym elemencie mamy wyświetlane jako blok inline. Do tej pory rozpoczęliśmy testowanie projektu na urządzeniach mobilnych (iPhone, iPad i Android) i nie mieliśmy żadnych problemów związanych z rozmiarami pudełek z którymkolwiek z nich, więc wygląda na to, że dobrze się sprawdziło, .

znalazłem to, aby pomóc zadbać o kwestie w IE7

https://github.com/Schepp/box-sizing-polyfill