Ik gebruik voor mijn site een verticaal grid met een lineheight van 25px. Nu gaat dit prima (zie onderste screenshot), maar op het moment dat ik binnen een <li> tag een groter of kleiner font gebruik, dan gaat het in firefox fout (zie bovenste screenshot). Op één of andere manier verandert hij de line-height als er een font staat met een andere font-size.
Zijn er mensen die dit probleem vaker bij de hand hebben gehad? Is hier een oplossing voor?
Screenshot van het probleem:
Screenshot als font-size wel gelijk blijft:
Zijn er mensen die dit probleem vaker bij de hand hebben gehad? Is hier een oplossing voor?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE HTML> <html> <head> <title>Testje</title> <style> * { margin: 0; padding: 0; } body { background-image:url(grid.gif); line-height: 25px; margin-top: 34px; margin-left: 200px; } li a { text-decoration: none; color: #000; } li { font-size: 15px; } li span { font-size: 10px; } </style> </head> <body> <ul> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> <li><a href="www.test.com">Category <span>(12)</span></a></li> </ul> </body> </html> |
Screenshot van het probleem:
Screenshot als font-size wel gelijk blijft:
:strip_icc():strip_exif()/u/35587/icon-got.jpg?f=community){kind=icon}
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
