I går, etter at problemet jeg møtte med CSS Tilbakestiller i Google Chrome ... jeg tenkte på å grave litt dypere inn i området av User Agent Style Sheets ...
Fant denne tabellen på standardverdiene CSS2.1 User Agent Style Sheets ... (for de uvitende om hva "User Agent Style Sheets", er å følge Hva er User Agent Style Sheets (spesifikasjon) .
For en full liste av CSS 2.1 Bruker stilsett mislighold klikk her
I går, som alle andre "Groundhog Day", ble jeg jobber med noen CSS / tableless layouter. Alt gikk bra i 7 IE, FF 3 og Chrome, inntill Plutselig så jeg noen un-ignorable marginer sett bare i Google Chrome. Selv om veldig merkelig og worring, var det noen nye bug / problem som jeg hadde risikere å møte, var det endelig litt krydder i mitt verdslig arbeid. Trist (men fin) det ble fikset i løpet av noen få minutter av sonden ...
I utgangspunktet så det ut som Google Chrome ignorert min CSS Tilbakestiller (margin: 0px). Det faktisk ble forårsaket av user agent stilarket (-WebKit-padding-start: 40px). Så løsningen var å nullstille denne stilen ved å sette padding: 0 de misbehaving elementene.
En god måte å unngå dette problemet skjer til enhver element er å bruke en global CSS Rest som følger
* {Margin: 0; padding: 0;}
Hva er User Agent Style Sheets (spesifikasjon)?
Følgende utdrag er hentet fra http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , følg linken for å lese mer om User Agent Style Sheets
CSS 1 introduserer ideen ved å si at hver User Agent (UA, ofte en "nettleser" eller "web klient ') vil ha en standard stilark som presenterer dokumenter i en rimelig - men uten tvil verdslig - måte. CSS 2 sier at i samsvar nettlesarar må bruke en standard stilark (eller oppføre seg som om de gjorde) og at en bruker agent standard stilark bør presentere elementene i dokumentet språket på en måte som tilfredsstiller generelle presentasjon forventninger til dokumentet språk; CSS 3 er trolig det samme sinn.
Siden CSS spesifikasjonene la det opp til implementeringer om å bruke en "ekte" style sheet til standard visning eller ikke, er det ikke forbausende at du ikke finner en standard stilark i hvert nettleserens installasjonsmappen. I motsetning til Microsofts Internet Explorer, samt Opera, for eksempel (og så vidt jeg vet), Gecko nettlesere som Firefox og Netscape Navigator (se etter "html.css"), men også Konqueror gjør det ganske enkelt å forstå deres standard styling.
En CSS Reset er / er CSS til å sette en rekke element stiler til en bestemt baseline som skaper konsistens på tvers av ulike nettlesere.
Vi har alle vært gjennom mareritt å skrive cross-browser CSS-tallet. Så når vi begynner å skrive vår CSS, er det en praksis for å tilbakestille den første til å fjerne / tilbakestille noen kryss nettleser inkonsekvenser. CSS Tilbakestiller, er enkle få linjer med CSS som du begynner din CSS med, og gir deg en ren base for å begynne å bygge din på.
CSS tilbakestilles at jeg vanligvis pleier å bruke ser slik ut
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}ol, ul {
list-style: none;
}H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}
Tilbakestill nettleseren skriftstørrelse
Legg også merke til reset som har blitt brukt til nettleseren skriftstørrelsen i følgende linje ...
html {font-size: 76%;}
Ovennevnte CSS nullstiller leseren skriftstørrelsen til 10 piksler, og dette gjør det mulig å arbeide med relative fontstørrelser (som er alle viktige fra en WAI samsvar prespective)
For eksempel i følgende definisjon, er font-size i en span satt til 10 piksler og at det i paragarph er satt til 14 piksler ...
span {font-size: 1em;}
p {font-size: 1.4em;}
