Stretch div with property css "zoom" in internet explorer

Question

I have a div with the zoom property applied, inside another div.

.zoom{
   zoom:0.5;  
}  

I want that it takes the aspect in google chrome, zoom in the text inside the div and fill all width of the wrapper div.

My problem happens in IE, where the div shrink.

What changes should I do to have the aspect wanted in Internet Explorer?

I made a jsfiddle to test it (http://jsfiddle.net/u0f0fu4f/4/).

Answer 1

Try using transform: scale

This will keep the zoom effect working on IE, Chrome, Safari, Opera.

The CSS zoom property, it isn't really standard, and it isn't recommended for production apps.

http://jsfiddle.net/u0f0fu4f/5/

.zoom{
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5,0.5); 
}