#
March 12, 2013 at 9:28 am

Hi,

I am trying to find out a “cross-browsers” way to display price amounts using CSS.

The idea that directly came to my mind was to split the value (integer,decimal) and use the matrix property to scale and translate the decimal part such as:

.price {font-size:40px}

.integer {display:inline-block;}

.decimal{display:inline-block;transform:matrix(0.8,0,0,0.6,0,-16);}

(of course with all variations of “transform”).

The only problem is twofold:

1) IE7-8 for which I need to use filter and -ms-filter (which means that for IE9, I have a conflict)

2) for IE7-8, I also need to adapt the .decimal{margin-top:-19px}

3) I need to calculate the -16 (translateY) value according to the font-size

All this does not make it convenient.

Does anybody could suggest a better solution?

Many thanks