google-chrome - ChromeとFireFoxで負のマージンが正しくズームされない

Question

Chrome21がリリースされた8月に正しく機能しなくなったツリービューアがあります。ズームアウト（90％以下）すると、レイアウトが混乱します。私はそれがマージン左と関係があると思います：-1px; 正しくズームしていません。

バグhttps://code.google.com/p/chromium/issues/detail?id=142178&thanks=142178&ts=1344723455を作成しましたが、応答がありません。

この問題はSafari、IE、Chrome 20では発生せず、最近までFireFoxでは発生しませんでした。

助言がありますか？

http://jsfiddle.net/reueljw/yWgLU/3/

ChromeまたはFireFoxでズームアウトを再現するには。

<style type="text/css">
    .tree                                     { float:left; display:block; position:relative; }
    .viewer                                   { margin-left:auto; margin-right:auto; font-size:0.6em; }
    .node-top                                 { position:relative; min-width:30px; margin-left:auto; margin-right:auto; }
    .node-left                                { position:relative; min-width:30px; }
    .node-right                               { position:relative; min-width:30px; }
    .node-data                                { max-width:60px; margin-left:auto; margin-right:auto;text-align:center; clear:both; overflow:hidden; height:15px; }        
    .starter                                  { width:49.9999%; min-height:10px; position:relative; float:left; }
    .ender                                    { margin-left: -1px; width: 49.9999%; min-height:10px; position:relative; float:left; }
    .tail                                     { border-right: 1px solid #ACE; width: 49.9999%; min-height:10px; position:relative; float:left;}
    .tailend                                  { margin-left: -1px; width: 49.9999%; min-height:10px; position:relative; float:left;}
    .node-left .ender                         { border-left: 1px solid #ACE; border-top: 1px solid #ACE;}
    .node-right .starter                      { border-right: 1px solid #ACE; border-top: 1px solid #ACE;}
    .child .tail                              { border: none }   
</style>
<div id="template-area" class="viewer" style="width: 70px; padding-top: 30px;">
    <div id="1" class="tree " style="width: 70px;">                 
        <div class="node-top">
            <div class="starter"></div>                     
            <div class="ender"></div>                     
            <div class="node-data node node-open">                
                <p class="node-text">1</p>                     
            </div>                     
            <div class="tail"></div>                     
            <div class="tailend"></div>                 
        </div>             
        <div id="2" class="tree  child " style="width: 35px;">                 
            <div class="node-left">                     
                <div class="starter">
                </div>                     
                <div class="ender"></div>                     
                <div class="node-data node node-open">        
                    <p class="node-text">2</p>   
                </div>                     
                <div class="tail"></div>                     
                <div class="tailend"></div>                 
            </div>             
        </div>
        <div id="3" class="tree  child " style="width: 35px;">
            <div class="node-right">
                <div class="starter"></div>                     
                <div class="ender"></div>                     
                <div class="node-data node node-open">         
                    <p class="node-text">3</p>  
                </div>                     
                <div class="tail"></div>                     
                <div class="tailend"></div>                 
            </div>             
        </div></div></div>
</div>