css縮放後的空白

我有一個iframe顯示縮放的網站，但縮放後，空白停留，其大小是縮放前的大小。我試圖用不同的div包裝它，因爲我找到了一些解決方案，但它不適合我，空間仍然存在。css縮放後的空白

你可以看到它here。

HTML

<div id='wrap'>  
<div id='preview_div'> 
    <iframe src="../404/index.php"></iframe> 
</div> 
</div>

CSS

#preview_div { 
    position: relative; 
    width: 700px; 
    height:600px; 
    margin:auto; 
} 

iframe { 
    background-color:white; 
    width: 1400px; 
    height: 960px; 
    position: relative; 
    overflow:hidden; 
    border: none; 

    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.5); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.5); 
    -webkit-transform-origin: 0 0; 
} 

#wrap { 
    width:700px; 
    height:600px; 
    margin:auto; 
    float:left; 
}

任何想法？謝謝。

來源

2014-01-23 user3104757

轉換工作就像'position：relative' - 元素在文檔流中保持其原始大小和位置，它們只是通過轉換呈現。 –