当我加载页面时,我右侧页面上的一个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上的第一篇文章,我对编程比较陌生。也许你想建议我如何更好地格式化我的帖子或更好地缩短它。 ;)
答案 0 :(得分:0)
您在谈论哪种浏览器?不同的浏览器表现不同。
如果我猜,你可能会遇到舍入错误的问题。尝试首先使用绝对单位(px,em,...)而不是%,如果这可以解决你的问题,那可能是一个舍入错误。
简单的例子让你理解我的意思:
3个div漂浮,宽度为33.3% - 数学上它们加起来达到99.9%所以一切都应该没问题。但是一些浏览器(例如旧的IE)在进行布局之前首先计算33%,所以如果你得到20px,你得到6.66px * 3,它将四舍五入为7px,7px * 3 = 21px。
如何解决问题: 1.以绝对单位工作 2.研究响应式设计并以绝对单位工作(这样你至少可以获得一些尺寸) 3.使用表格(如果你使它们具有“代表性”,即使在html5中也很好) 4.只在某些浏览器中使用它 5.重新计算每个JavaScript的大小 6.使用flex-box ...