CSS Marginene i Internet Explorer Vs. Firefox

Bygge en Web design med HTML og Cascading Style Sheets (CSS) er ganske grei, så lenge du holder deg med en nettleser. Altfor ofte, men når du ser din perfekte design i en annen nettleser, ser du stygge uønskede mellomrom eller overlappende elementer. Microsoft og Mozilla - for å si ingenting av Apple, Opera og Google - rett og slett ikke kan bli enige om en standard oppførsel for visse CSS egenskaper, særlig padding og marginer, så Webdesignere er nesten alltid nødt til å ansette midlertidige løsninger og triks.

Standard Style Sheets

IE og Firefox har hver standardmaler som de gjelder når ingen andre stilen er til stede. På denne måten en vanlig HTML-side, av en gammel variasjon skapes før det var CSS, vil fortsatt vise tekst lesbar, ha, for eksempel hvitt mellomrom mellom avsnittene. Problemet er at forskjellige nettlesere har ulike standard stilark. I tilfelle av avsnittet tag "<p>", IE viser en margin bare på bunnen, mens Mozilla viser marginene både ved toppen og bunnen. For ytterligere å komplisere saker, andre nettlesere bruke padding i stedet marginer å skape tomrom mellom elementer.

Overstyrer standard

For å fjerne den standard virkemåte for ethvert element i alle nettlesere, har en designer bare å eksplisitt angi både sin margin og padding til 0 på toppen av stilark eller HTML-side. For eksempel, for å tilbake avsnittet tag, inkluderer følgende:

p {margin: 0; padding: 0}

Nå er alle ledd elementene vil vise ingen padding og ingen margin mindre du eksplisitt sette dem.

Global Reset

Ett svar til leser uoverensstemmelser med margin og padding er å rive alt ut og starte på nytt. CSS tilbyr en måte å gjøre dette. Øverst på siden eller stilark, bare ta med denne erklæringen:

* {Margin: 0; padding: 0}

Nå vil det hvite området erklært av nettleserens standard stilark fjernes for alle elementer. Dette vil gi deg større kontroll over utseendet på din design i alle nettlesere. Selvfølgelig, det betyr også hvis du vil marginene eller padding mellom avsnittene, eller noen andre elementer, må du sette den der selv med ekstra stil erklæringer.

Ulemper til Global Reset

Mens den globale reset løsningen fungerer utmerket godt på de fleste elementer, er det noen uønskede bivirkninger. I Mozilla, vil knappene som en gang ble animert når moused over eller deprimert ikke animeres lenger. For å gjenopprette noen form for effekt, må du designe og implementere din egen. Dessuten vil marginene innenfor drop-downs i Mozilla forsvinne, og vil være vanskelig å gjenopprette uten å påvirke visningen i andre nettlesere. Derfor, hvis en side bruker mye av skjemaelementer, kan det være klokest å ikke bruke den globale reset metoden, men en mer selektiv tilbakestilling av bare de elementer som viser feil i noen nettlesere.

ytelses~~POS=TRUNC Bekymringer

Et annet mulig problem med den globale white space reset løsning er ytelsen. Siden en global reset brukes ukritisk til alle elementene på en webside, selv de som kanskje allerede har marginene satt til 0 eller hvis standard oppførsel er akseptabelt i både IE og Firefox, er den yter ekstra, unødvendige operasjoner. Mens de fleste av dagens nettlesere er raske nok til at en forsvinnende liten forsinkelse i sidegjengivelse aldri vil være klart for sluttbrukere, noen designere fremdeles føler seg som en global reset er overkill og anbefaler bare å nullstille spesifikke elementer når deres standard oppførsel som forårsaker problemer.