爲什麼div在瀏覽器縮小時移動？

當我在我的瀏覽器上縮小很多時，Chrome瀏覽器的info_table向下移動。它爲什麼這樣做？同樣當overflow: auto;到section時，它也會移動。我能做什麼？爲什麼div在瀏覽器縮小時移動？

CSS

*{ 
    font-size:100%; 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    width: 100%; 
} 

#info_table{ 
    float: left; 
    width: 480px; 
    margin: 40px 0px 0px 16px; 
    border-spacing: 0px 0px; 
} 

#left{ 
    float:left; 
    margin: 60px 0px; 
} 

#photo{ 
    float: left; 
    width: 176px; 
    height: 176px; 
    border: 1px solid black; 
} 

#section{ 
    margin: 160px auto 0px; 
    width: 675.2px; 
    height: 320px; 
    #overflow: auto; 
    #border:1px solid black; 
} 

#choosephoto{ 
    width: 64px; 
} 

#submitwords{ 
    width: 72px; 
    height: 28px; 
    margin-left: 104px; 
    #border:1px solid purple; 
} 


#wrapper{ 
    display: block; 
    box-shadow: 3px 10px 5px #888888; 
    margin: 0px auto; 
    margin-top: 48px; 
    width: 1024px; 
    height: 960px; 
    overflow: auto; 
    background:white; 
}

HTML

<div id="section"> 
      <body> 
      </body> 
      <form> 
       <div id="left"> 
        <div id="photo"> 

        </div> 
        <br/> 
        <input type="file" id="choosephoto" name="uploadphoto"/> 
       </div> 
       <table id="info_table"> 
        <tr> 
         <td>Name:</td> 
        </tr> 
        <tr> 
         <td><input/></td> 
        </tr> 
        <tr> 
         <td>Info:</td> 
        </tr> 
        <tr> 
         <td><textarea></textarea></td> 
        </tr> 
        <tr> 
         <td><button type="submit" id="submitwords">Update</button></td> 
        </tr> 
       </table> 
      </form> 
     </div>

來源

2013-06-18 user2127833

[幸運的猜測]（http://jsfiddle.net/p44Zj/）：也許是因爲1px邊框和一些舍入問題在各級縮放？ – Jeroen

在Chrome瀏覽器上查看開發者控制檯顯示，邊界實際上是在'＃photo'上從1.5015px更改爲2px，這會將寬度添加到其容器和（我假設）將信息框向下推。 – JustcallmeDrago

@JustcallmeDrago謝謝，這是因爲邊界上的照片。 – user2127833

至於發生了什麼事：它出現的瀏覽器通過改變邊框的寬度上#photo補償縮放級別。

67％縮放：

enter image description here

50％縮放：

enter image description here

至於如何解決？除非能夠像這樣縮放是非常需要的，否則我不會擔心它，因爲確保一切正確縮放都需要很多工作。

來源

2013-06-18 20:25:35 JustcallmeDrago

是的最佳答案謝謝。我不知道瀏覽器中的這種行爲。 – user2127833

這是因爲info_table的width設置太寬爲sectionwidth。

例如，減小寬度info_table可以緩解這種情況。所以你可以嘗試用下面的代碼替換它。

#info_table{ 
    float: left; 
    width: 460px; 
    margin: 40px 0px 0px 16px; 
    border-spacing: 0px 0px; 
}

話雖如此，這將是更好地利用網格系統（如960.gs）讀了。

來源

2013-06-18 20:20:10 redditor

爲什麼你身上有一個標籤？你的代碼是一個爛攤子，我重新寫吧here

來源

2013-06-18 20:24:39 user2212773

爲什麼div在瀏覽器縮小時移動？

回答

相關問題