2012-06-16 30 views
1

我正在尝试制作使用框架并排显示两个其他网页的网页。当我尝试缩小一点以便我可以看到更多的页面时,就会出现问题。我正在使用-moz-transform,但它无法得到我想要的结果。使用-moz-transform进行CSS转换

我希望它看起来像this只是在每个单独的页面上放大缩小。 但是使用变形后我get

代码:

<div id="window1" style="height:60%; width:50%; float: left"> 
    <iframe style="-moz-transform: scale(0.5, 0.5); transform-origin: 0 0;" id="thistory" src="http://www.15min.lt/" height="100%" width="100%"></iframe> 
</div> 
<div id="window2" style="height:60%; width:50%; float: right;"> 
    <iframe style="-moz-transform: scale(0.5, 0.5); transform-origin: 0 0;" id="thistory1" src="http://www.15min.lt/" height="100%" width="100%"></iframe> 
</div> 

任何意见将是巨大的。

回答

0

这就是-moz-transform应该如何工作。

您可以做的是使iframe的大小是它们的两倍,然后使用变换将其缩小。这也会缩小滚动条,所以您需要在滚动div s(overflow:auto等)中包含无滚动条的iframe s,以便获得正常大小的滚动条。

+0

它工作。有点。任何想法如何摆脱变革留下的空白? – kibirkstele

+0

@kibirkstele我自己弄不明白;可能是将'transform-origin'设置为左上角('0,0')? – egasimus