Niquelao » Blogarkiv » Skriftstørrelser og arv i formularstyringer

Det handler om at udføre en række tests for at fastlægge et mønster for adfærd på tværs af forskellige browsere og levere en løsning, der er kompatibel med dem alle. Løsningen finder du til sidst.

Listen over de anvendte browsere er følgende: Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Mozilla Firefox 1.5.0.3 (W) Opera 8.54 (W) Mozilla Firefox 1.5.0.3 (L) Opera 9 (L) Konqueror 3.5.2 Galeon 2.0.1 Testen består i at foretage forskellige ændringer i skriftegenskaberne anvendt på elementerne i følgende kode:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur commodo. Phasellus quis dui ut est scelerisque tempus. Sed faucibus nisl consequat dolor.

Vestibulum ornare laoreet nunc. Nunc euismod nulla et libero. In dictum. Sed fringilla. Ut nisi neque, porttitor vitae, pretium vel, sodales a, massa.

Vestibulum orci. Quisque pellentesque, leo vel posuere luctus, ante nisl lobortis mauris, in tempus pede nibh at nibh. Etiam vehicula varius felis. Sed dapibus risus nec ante.

In ultricies. Ut lacinia felis ac eros. Integer ultricies libero at velit. Vestibulum adipiscing venenatis purus. Mauris consequat, libero eget lacinia aliquam, risus nibh gravida ante, eu consequat neque nibh ut lorem.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Nam quam.

Nedenfor findes links til de forskellige udførte tests. Til højre for linket angives de egenskaber, der er ændret i hvert tilfælde. Eksempel 1 (no-style) Eksempel 2 (body: font-size) Eksempel 3 (body: font-family) Eksempel 4 (body: font) Eksempel 5 (body,input: font-family) Eksempel 6 (body: font-family / input: font-size) Eksempel 7 (body: font-family / input: font) Eksempel 8 (body: font-size / input: font-family) Eksempel 9 (body,input: font-size) Eksempel 10 (body: font-size / input: font) Eksempel 11 (body,input: font) Eksempel 12 (input: font-family) Eksempel 13 (input: font-size) Eksempel 14 (input: font) Eksempel 15 (body: font / input: font-family) Eksempel 16 (body: font / input: font-size) Eksempel 17 (body,input: font-family inherit) Eksempel 18 (body: font-family inherit/ input: font-size inherit) Eksempel 19 (body,input: font-size inherit) Eksempel 20 (body: font-size inherit/ input: font-family inherit) Eksempel 21 (body: font / input: font-family inherit) Eksempel 22 (body: font / input: font-size inherit) Eksempel 23 (input: font inherit) Eksempel 24 (input: font-size font-family inherit) Eksempel 25 (body,input: inherit) Der er observeret en lignende adfærd mellem Firefox- og Galeon-browsere, ligeledes mellem Konqueror og IE, mens Opera viser visse variationer.

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Vi kan konkludere med en minimal fejlmargin, at det er tilstrækkeligt at definere en relativ skriftstørrelse (f.eks. 1em ) for input-felter. Hvis der er defineret en skriftstørrelse i body-elementet (font-size), vil skriftstørrelsen i formularfeltet blive justeret korrekt, og hvis intet er defineret i body, vil den tilpasse sig tekststørrelsen i resten af dokumentet. body { font-size: 62.5%; } input { font-size: 1em; } Der vil sandsynligvis være en lille forskel afhængigt af den anvendte browser.

For at gøre arbejdet helt færdigt kan skrifttypen også ensartes ved hjælp af den tilsvarende deklaration i body-elementet. body { font: 62.5% Arial,Verdana,sans-serif; } input { font-size: 1em; } Kategori: CSS —> Du kan følge kommentarerne via RSS 2.0-feedet . Du kan også efterlade en kommentar eller sende et trackback fra dit eget websted. Forrige artikel: En Niquelada-fest Næste artikel: Tre-kolonne layout og markup… “den præcise” Efterlad din kommentar Felterne Navn og E-mail er obligatoriske Føj os til…

Tags vi fremhæver generelt tilgængelighed bert bos blockquote bug cañas citater cite adfærd viden CSS vinkler standarder fieldset Firefox format formular skrifter hidden ie IE 7 information javascript legend liste niquelando obligatorisk opera strand q squash ferie w3c WCAG xhtml Dette værk er licenseret under en Creative Commons-licens .

P.S. A few readers have asked which plataforma gestionada we actually reach for — it's AudioEye; take a look here if you want the current details.