css - 跨浏览器定位问题 zoom - div 和 table(?)

Question

最后我设法使这个小网站在 ff/ie/chrome 中看起来可以接受

-但是当我放大/缩小 ff/chrome 时，位置会发生变化，而在 ie 中它不会。

我的代码:

<div id="parent">
  <b>Favor Emitir Cheques, Depostiso o Tramsferencias <br />
  a Nombre de "xxxxxxx xxxxxxxxxx, C.A." <br />
  en xxxxxxxx xxxx, CTA CTE, No. xxxx-xxxx-xx-xxxxxxxxxx</b>
  <div id="child1">
    BASE IMPONIBLE BS.
    <table border="1" cellspacing="0">
        <tr>
            <td>I.V.A. <input id="iva" type="text" name="iva" size="5" value="{{iva}}"/> % B.s.</td>
        </tr>
    </table>
    IMPORTE TOTAL Bs.
    <table id="child1Table">
      ...Text Display...
    </table>
  </div>
<div id="child2">
  ...
</div>

在 .css im 上使用 meyers reset，除此之外还有以下内容:

#parent    {
font-size:80%;
width: 100%;

position:relative;
top:0%;
} 

#child1
{
position:absolute;
left:35%;
top:0%;
}

#child1Table    {
position:absolute;
left:120%;
top:0%;
}

#child2
{
position:absolute;
top:150%;
left:0%;
}

该链接以正常和缩放方式显示 IE7 FF 和 Chrome 图片(抱歉发布了奇怪的图片):https://docs.google.com/drawings/d/1tKIAkGs4kXbTEUW95mPu7Q5OMe3uEzJSbXetLAbDdJo/edit

关于如何从这个来源管理它的任何提示？还是应该重新开始？

Answer 1

看起来 FF 和 Chrome 正在缩放元素，但没有根据新的页面大小重新计算位置。

我会使用不同的方法，例如 float child1、child1Table 和 child2，并使用边距将它们分隔到需要的位置。