Question

我有一个树形查看器在8月发布Chrome 21时停止正常工作。当缩小（90％和更低）时，布局变得混乱。我认为它与margin-left有关：-1px;没有正确缩放。

我创建了一个错误https://code.google.com/p/chromium/issues/detail?id=142178&thanks=142178&ts=1344723455但没有回应。

在Safari，IE和Chrome 20中不会出现此问题，直到最近它才出现在FireFox中。

有什么建议吗？

要在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>

在Chrome和FireFox中，负边距未正确缩放

0 个答案: