After struggling with this for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.
This stripped-down CSS works in FF 26, Chrome 32, Opera 18, and IE9 -11 as of 1/7/2014:
.wrap
{
width: 320px;
height: 192px;
padding: 0;
overflow: hidden;
}
.frame
{
width: 1280px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
For IE8, set the width/height to match the iframe, and add -ms-zoom to the .wrap container div:
.wrap
{
width: 1280px; /* same size as frame */
height: 768px;
-ms-zoom: 0.25; /* for IE 8 ONLY */
}
Just use your favorite method for browser sniffing to conditionally include the appropriate CSS, see Is there a way to do browser specific conditional CSS inside a *.css file? for some ideas.
IE7 was a lost cause since -ms-zoom did not exist until IE8.
Here's the actual HTML I tested with: