CSS - Margines coś złego?

Question

Zauważyłem, że niektóre przeglądarki mają problemy z marginesami, szczególnie gdy element jest pływający. Na przykład ta strona, którą robię, wygląda dobrze w Firefoksie, ale IE7 kompletnie wkręca marginesy. Testuję go także w kilku przeglądarkach Linuxowych i niektóre z nich popełniają podobne błędy.

Strona jest http://w3box.com/mat

To wygląda dobrze w FF3.0 ile mogę powiedzieć. Nie widziałem go jeszcze w FF2 lub IE6. Dlaczego tak się dzieje? Czy to dlatego, że moje DIV-y zostały rozwinięte z określonymi marginesami?

Czy jest coś, czego powinienem unikać lub powinienem zrobić inaczej?

Edycja: Wygląda na to, że moje tagi były źródłem obłędu. Umieściłem obrazy w tym, co nie zostało zdefiniowane w CSS, i które zawierało je w połączeniu z marginesami. Wszystko to spieprzyło i muszę je powtórzyć.

Co więcej, wydarzyło się, gdy użyłem XHTML Strict zamiast :) Niż wszyscy! Spróbuję to naprawić na własną rękę :)

Answer 1

Marging nie jest zły, ale IE has some troubles z marginesami elementów pływających. Chociaż istnieje wiele przepisów na poprawianie, uważam, że w twoim przypadku możesz użyć pozycjonowania bezwzględnego zamiast wartości zmiennoprzecinkowej i marginesów (nie musisz tak naprawdę zachowywać się "float", gdy obraz jest zawijany tekstem)

Answer 2

Proponuję użyć jakiejś formy CSS Framework (Blueprint CSS, 960 Grid, itp.), Ponieważ mają one wiele marginesów, padding i innych typowych resetów elementów HTML . Powinieneś odkryć, że tworzenie wielu przeglądarek jest łatwiejsze przy użyciu frameworka.

Answer 3

Różne przeglądarki mają różne sposoby obsługi modelu skrzynki. W większości przypadków witryny dobrze wyświetlane w FF, Chrome lub IE8 mogą mieć problemy w IE6 i 7. Aby obejść ten problem, możesz spróbować ustawić domyślny margines i dopełnienie na 0 (i dostosować je w razie potrzeby elementy):

* {marża: 0 pikseli; wypełnienie: 0px; } // Najprostszy przepis ...

Aby dowiedzieć się więcej na temat CSS zresetować można spojrzeć na: http://meyerweb.com/eric/tools/css/reset/

a następnie zastosować różne style dla IE7 i 6 z komentarzy warunkowych.

Answer 4

Nie zgadzam się z korzystanie z biblioteki, jeśli chcesz poznać część CSS krzywej, niestety uczy się o tym, jak różne przeglądarki reagują na CSS. Nie sugerowałbym nawet używania resetowania arkusza stylów. Jeśli masz zamiar robić to dużo, naucz się, jak działa CSS. Jeśli używasz biblioteki lub zestawu arkuszy stylów, których nie rozumiesz, jak to naprawisz, gdy się zepsuje.

Answer 5

Jak wspomniano w innych odpowiedziach, ma to związek z interpretacją IE w polu model.

Ilekroć coś jest pływające, IE dąży do podwojenia podanych marginesów. Można to naprawić za pomocą dodatkowego arkusza stylów dla IE przy użyciu conditional comments.

Zobacz także: http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 6

Nie ma nic złego w używaniu marże.

Stare wersje IE mają jeden błąd i tylko to nie jest wystarczającym powodem, aby nie używać jednej z głównych funkcji CSS. W szczególności, ten błąd występuje w IE, gdy unoszą się obiekt i nadać mu pewien margines w tym samym kierunku, np .:

.whatever { 
    float: right; 
    margin-right: 5px; 
} 

Można sobie z tym szereg sposobów, w zależności od układu. Jednym ze sposobów jest dodanie kolejnego div dookoła twojego pudełka i użycie wypełnienia, aby powielić to samo miejsce, na którym znajdowałby się margines.