2009 27 jul 2009

User agent Style Sheets: Mystery Margener i Google Chrome

I går, ligesom alle andre "Ground Hog Day", arbejdede jeg på nogle CSS / tableless layouts. Alt gik godt i IE 7, FF 3 og Chrome, indtil pludselig, så jeg nogle un-ignorable margener kun ses i Google Chrome. Selvom meget mærkeligt og worring, det var nogle nye fejl / spørgsmål, som jeg var kommet accross, var der endelig lidt krydderi i mit verdslige arbejde. Trist (men dejlig) det fik fastsættes inden for få minutter af sonden ...

Dybest set, Det lignede Google Chrome ignorerede min CSS Nulstiller (margin: 0px). Det faktisk var forårsaget af brugeren agent stylesheet (-webkit-padding-start: 40px). Så løsningen var at nulstille denne stil ved at sætte padding: 0 de opfører sig elementer.
En god måde at undgå dette problem sker for ethvert element er at bruge en global CSS Rest som følger

* {Margin: 0; padding: 0;}

Hvad er User agent Style Sheets (specifikation)?
Følgende uddrag er taget fra http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , fulgt linket for at læse mere om User agent Style Sheets

CSS 1 introducerer ideen med, at hver bruger Agent (UA, ofte en "web browser 'eller' web-klient") vil have en standard style sheet der præsenterer dokumenter inden for en rimelig - men nok banalt - måde. CSS 2 siger, at der opfylder brugerens agenter skal anvende en standard style sheet (eller opfører sig som om de gjorde), og at en brugers agent standard-stylesheet skal præsentere elementerne i dokumentet sproget på måder, der opfylder de generelle præsentation forventninger til det dokument, sprog; CSS 3 er sandsynligvis af samme mening.

Da CSS specifikationerne lade det være op til implementeringer, om at bruge en "rigtig" style sheet til standard display eller ej, er det ikke forbavsende, at du ikke kan finde en standard style sheet i alle browsers installationsmappe. I modsætning til Microsoft Internet Explorer såvel som Opera, (og så vidt jeg ved) for eksempel gøre Gecko browsere som Firefox og Netscape Navigator (se efter "html.css"), men også Konqueror det temmelig nemt at forstå deres standard styling.


NDK hjem | Udtrykke IT | udtrykke Smag | udtrykke Penmenship | udtrykke Awe | udtrykke mig