1

当 Chrome 21 发布时，我有一个树查看器在 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>
4

0 回答 0