itzinteglegegmann
New Member
I have a \[code\]span\[/code\] and an \[code\]input\[/code\] element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?
My objective is to make them look exactly the same in IE9, Chrome and FF.CSS definitions (FIXED), if they still matter.\[code\]* { font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */}body { /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/ font-size: .8em; margin: 0; padding: 0; color: #000;}.button { text-align:center; min-width:80px; display:inline-block; white-space:nowrap; background-color:#4A8CF6; color:#FFF; padding:4px; margin:1px; border:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-size: .8em;}\[/code\]SolutionThe problem was that the span elements inherited from my CSS definition for body and the input elements didn't. I had defined the font in my CSS with \[code\]body { font-family:...; }\[/code\] like my computed results show and I thought that using \[code\]display: inline-block;\[/code\] would force both of them to inherit the font from body but it did not.The solution was to switch to using \[code\]* { font-family:...; }\[/code\] for the font definitions. The button and clickable classes simply defined sizes and colors and such.