Firefox 在 div 中放大和缩小 html 内容的问题

Question

我有一个 div，其中包含一些 html 内容，如文本和表格，通过使用 jQuery 或任何其他我需要使该 html 内容放大和缩小的工具。

我尝试了下面的代码，但它在 Firefox 中不起作用。

HTML

<input type="button" id="zoomin" value="+" onclick="return ZoomIn();">
<input type="button" id="zoomout" value="-"  onclick="return ZoomOut();"> 
<div class="imgBox" id="imgBox" style="zoom: 100%;">
//My content
</div>

JS

function ZoomIn() {
    var ZoomInValue = parseInt(document.getElementById("imgBox").style.zoom) + 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomInValue;
return false;
}

function ZoomOut() {
var ZoomOutValue = parseInt(document.getElementById("imgBox").style.zoom) - 10 + '%'
document.getElementById("imgBox").style.zoom = ZoomOutValue;
return false;
}

上面的代码可以在 Chrome 和 IE 中运行，但不能在 Firefox 中运行。 解决方法是什么？谢谢。

Answer 1

Firefox 不支持zoom 属性：http://www.browsersupport.net/CSS/zoom

以下是在 FF 中使用 CSS 实现类似效果所需的示例：

-moz-transform: scale(4);

你可以用 JS 来应用这个，比如：

document.getElementById("imgBox").style.MozTransform = 'scale(4)';