DIV隨機移動

Question

當我加載我的頁面時，我的頁面上浮動右邊的一個DIV有時會向下移動。當我刷新頁面時，它通常會恢復正常，但是如果我發送刷新密鑰，則經常會再次下移。

這裏是我的HTML，其中#users_area是在那裏我遇到的問題：

<!-- Main Window --> 
    <div id="container"> 
     <img src="images/saay_title.png" id="saay_title"/> 
     <div class="areas" id="chat_area"> 
     </div> 
     <div class="areas" id="users_area"> 
     </div> 
     <form><textarea class="areas" id="type_area" placeholder="Chat..."></textarea></form> 
     <input type="button" value="Send" id="submit"> 
    </div> 
</body> 
</html> 

這是我與大多數樣式屬性的CSS排除：

/* Global */ 

body, html { 
/* Settings */ 
    margin: 0%; 
    padding: 0%; 
} 

#container { 
/* Settings */ 
    width: 90%; 
    margin: auto; 
    margin-top: 1%; 
    margin-bottom: 1%; 
    padding: 1%; 
} 

#saay_title { 
/* Settings */ 
    width: 10%; 
    display: block; 
    margin: auto; 
    padding: 1%; 
} 

/* Chat Page */ 

.areas { 
/* Settings */ 
    display: inline-block; 
    padding: 1%; 
} 

#chat_area { 
/* Settings */ 
    width: 70%; 
    height: 8em; 
    margin-bottom: 1%; 
} 

#type_area { 
/* Settings */ 
    width: 70%; 
    height: 4em; 
    resize: none; 
} 

#users_area { 
/* Settings */ 
    width: 20%; 
    height: 8em; 
    float: right; 
    margin-bottom: 1%; 
} 

#submit { 
    /* Settings */ 
     -webkit-user-select: none; 
    cursor: pointer; 
    display: inline-block; 
    margin-top: 1%; 
    padding: 
} 

注：對不起，這是我在Stack Overflow的第一篇文章，我對編程比較陌生。也許你想建議我如何更好地設置我的帖子的格式，或者更好地縮短我的帖子。 ;）

Answer 1

你在說什麼瀏覽器？不同的瀏覽器行爲有所不同。

如果我猜測，你可能有一個四捨五入錯誤的問題。嘗試使用絕對單位首先（px，em，...）而不是％，如果這可以治癒您的問題，那可能是一個舍入誤差。

簡單的例子，所以你明白我的意思：

3的div寬度33.3％浮動 - 數學他們增加了99.9％，所以一切都應該罰款。但是一些瀏覽器（例如較老的IE）在做佈局之前首先計算33％，所以如果得到20px，則得到6.66px * 3，這將被舍入爲7px，並且7px * 3 = 21px。

如何來解決這個問題：在絕對單位 1.工作 2.外觀爲響應式設計和工作的絕對單位（這樣你可以得到至少有一些大小） 3.使用表（細甚至在HTML5如果你讓他們「代表性」） 4.只有它在某些瀏覽器工作的JavaScript每6 使用柔性盒 5.重新計算大小...