[CSS] Font size verschillend in browsers

[PdeBie]

Hoi allen,

ik heb een textarea met daarvoor een font-size ingesteld van 12px en font-family consolas (monospaced font)
Echter, in Chrome klopt de fontgrootte niet. Volgens Chrome is de font-size 13px.

Internet Explorer 11


Chrome


Je ziet dat ze de waarde beiden uit skin.css halen (regel 13 om precies te zijn). Maar bij Chrome staat de property toch op 13px en wordt ook als dusdanig weergegeven.

Wie o wie? Wat zou dit kunnen zijn?

[MoietyMe]

Zonder de daadwerkelijke CSS wordt dat lastig te bepelane. Kan je de relevante code in een testcase gieten? Bijvoorbeeld op CodePen.

[ Voor 20% gewijzigd door MoietyMe op 19-06-2014 12:52 ]

[PdeBie]

Dat zal lastig worden, aangezien het hier een DotNetNuke installatie betreft met meerdere CSS files etc.
Maar ik zal eens kijken of ik een soortgelijke testcase kan maken.

Maar wat we hier zien zijn de waarden op de 'berekend' pagina's van de webdevelopers van Internet Explorer en Chrome. Dus de definitieve waarden. Hiermee moet je dus kunnen traceren waar de waarde vandaan komt.

Echter, zien we dus bij Chrome dat in de CSS 12px staat, maar het font zelf 13px is.

-- edit --

http://codepen.io/anon/pen/ptrmb

hier zie je dus dat de font-size in beide browsers gelijk is.
Maar wel raar. Hoe kan het dat in Chrome een font groter is dan in IE? Gevalletje van andere interpretatie van de standaarden, zoals dat wel meer voorkomt in browser land?

[ Voor 23% gewijzigd door PdeBie op 19-06-2014 13:34 ]

[PdeBie]

Ah! Ik heb het kunnen reproduceren!

http://codepen.io/anon/pen/eoxLJ

Zodra de font-size in de body bepaald wordt en niet in de textarea zelf, bedenkt de browser zelf welke font-size de tekst in de textarea moet krijgen. Dus ik vermoed dat ik deze property gewoon op de textarea zelf ook moet zetten.

-- edit --
Mijn bovenstaand idee lijkt het inderdaad te zijn.

http://codepen.io/anon/pen/sgxCd

Je ziet dat ik nu op de textarea de font-size ook bepaal en daarmee krijgt Chrome dezelfde font-size als in IE.

Internet Explorer


Chrome

[ Voor 42% gewijzigd door PdeBie op 19-06-2014 13:46 ]

[Rickets]

Form-elementen worden meestal gerenderd met het uiterlijk van het OS. Sommige browsers betrekken de font-properties daar ook bij. Met font: inherit kan je dat corrigeren; op je textarea of al je form-elementen. (Daarom zit een dergelijke constructie ook in frameworks als normalize.css.)

[ Voor 7% gewijzigd door Rickets op 19-06-2014 13:45 ]

[MoietyMe]

Af en toe is de oplossing heel simpel Mooi dat je het zelf hebt kunnen oplossen!

[PdeBie]

mja, ik wist dus niet dat Chrome in een textarea de tekst een andere font grootte gaf. Met de CodePen pagina wel.

Af en toe best fijn dat uit elkaar strippen van de 'code' en dingen in detail bestuderen