Question

我有一个弹性设计的缩放和绝对位置问题。这是我的HTML：

<html>
<body>
	<div id="containerdiv" style="position: relative; width:100%; height:100%;background-color:gray;">
        <div id="spacerdiv1" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv2" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv3" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv4" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv5" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv6" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="spacerdiv7" style="border-top:solid black 0.1em;background-color:gray;height:1.356em;z-index:-1;"></div>
        <div id="moverdiv" style="display: inline-block;position: absolute; top:8.4575em; background-color:#ffffff; border: .1em solid black;height:1.2225em;">div that moves when zoomed</div>
	</div>
<body>
</html>

放大和缩小时，无法正确调整Chrome，Opera，FF和Safari中的绝对位置。奇怪的是，它在Internet Explorer中运行良好。所以我写了一些代码来检测每个浏览器的缩放级别。这是我需要为每个缩放级别更改的结果：

<script>
    var startpos = 28;
    if (zoom == 1.09) {//ff && chrome && opera
        newtop = startpos * 1.4167;
    } else if (zoom == 1.1) {
        newtop = startpos * 1.4160;
    } else if (zoom == 1.2) {
        newtop = startpos * 1.4112;
    } else if (zoom == 1.25) {
        newtop = startpos * 1.4092;
    } else if (zoom == 1.33) {
        newtop = startpos * 1.4558;
    } else if (zoom == 1.5) {
        newtop = startpos * 1.4447;
    } else if (zoom == 1.71) {
        newtop = startpos * 1.4337;
    } else if (zoom == 1.75) {
        newtop = startpos * 1.4322;
    } else if (zoom == 2) {
        newtop = startpos * 1.4555;
    } else if (zoom == 0.9) {
        newtop = startpos * 1.4300;
    } else if (zoom == 0.8) {
        newtop = startpos * 1.4389;
    } else if (zoom == 0.75) {
        newtop = startpos * 1.4445;
    } else if (zoom == 0.67) {
        newtop = startpos * 1.4553;


    } else if (zoom == 0.6942148760330579) {//safari
        newtop = startpos * 1.4400;
    } else if (zoom == 0.8329201784828953) {
        newtop = startpos * 1.3600;
    } else if (zoom == 0.9988109393579072) {
        newtop = startpos * 1.4000;
    } else if (zoom == 1.1982881597717547) {
        newtop = startpos * 1.3890;
    } else if (zoom == 1.6678200692041523) {
        newtop = startpos * 1.4355;
    } else if (zoom == 2.3692946058091287) {
        newtop = startpos * 1.4275;
    }
    document.getElementById("moverdiv").style.top = newtop + "em";
</script>

我的问题是有一个统一的等式，我可以运行以获得适当的比例“1.4167”？我需要一个FF，Chrome和Opera。还有一个独立的Safari。或者是否有其他方法可以让绝对定位为这些其他浏览器正确扩展？

更改缩放时Chrome，Opera，FF和Safari中的绝对位置

0 个答案: