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:

heading

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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -