firefox - CSS text-underline rendering difference between FF/IE and Chrome -
firefox - CSS text-underline rendering difference between FF/IE and Chrome -
i have question. in next url have set of h1,h2 , p elements respective css styling. h1 element has text-decoration underline.
http://nostalgia.mx/light2.html
open site both firefox+ie , chrome , you'll notice profound differences:
1.- firefox+ie create underline proportional fontsize of element beingness underlined, smart. google keeps lean , un-proportional.
2.- firefox+ie 'fuse' or 'meld' text underline silhouette 1 single piece, nice. chrome on other hand not.
ok. question is:
is possible create chrome's ff/ie's?
regards sotkra
the phenomenon can observed in simple setting have element big font size , set text-decoration: underline
on it. browsers implement in different ways regarding width of underline. there no way impact in css. css3 text draft has nil this, though has properties affecting other features of underlining. in discussions, a property setting underline has been proposed.
if wish simulate underlining using border-bottom
, can, complications in markup , css, set width (and color , position). example:
with style
h1 { font-size: 150px; } h1 { border-bottom: solid 0.05em; display: inline-block; } h1 span { position: relative; top: 0.2em; }
demo: http://jsfiddle.net/yucca42/qdeek/
in approach, need take care of setting heading on 1 line , using suitable top , bottom margins (probably settings on other elements, maybe wrapping element within div
container), since display: inline-block
removes normal heading rendering style.
css firefox google-chrome typography text-decorations
Comments
Post a Comment