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 дивы плавающие с шириной 33,3% - математически они добавляют до 99,9%, так что все должно быть хорошо. Но некоторые браузеры (например, более старый IE) сначала вычисляют 33% перед выполнением макета, поэтому, если у вас 20px, вы получите 6.66px * 3, который будет округлен до 7px и 7px * 3 = 21px.

Как решить эту проблему: 1. работу в абсолютных единицах 2. смотреть на адаптивный дизайн и работы в абсолютных единицах (таким образом, вы можете получить по крайней мере, некоторые калибровки) 3. таблицы использования (хорошо, даже в html5 если вы сделаете их «репрезентативным») 4. только он работает в некоторых браузерах размера 5. Recompute на JavaScript 6. использование гибкого ящик ...