当我加载我的页面时,我页面右侧 float 的一个 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 上的第一篇文章,我对编程还比较陌生。也许您想建议我如何更好地格式化我的帖子或更好地缩短它。 ;)
最佳答案
你说的是哪个浏览器?不同的浏览器表现不同。
如果我猜的话,您可能遇到舍入误差问题。首先尝试使用绝对单位(px、em、...)而不是 %,如果这样可以解决您的问题,则可能是舍入错误。
简单的例子让你明白我的意思:
3 个 float 宽度为 33.3% 的 div - 从数学上讲它们加起来为 99.9%,所以一切都应该没问题。但是有些浏览器(例如旧的 IE)在布局之前先计算 33%,所以如果你得到 20px,你会得到 6.66px * 3,这将四舍五入为 7px,并且 7px * 3 = 21px。
如何解决问题: 1.以绝对单位工作 2.研究响应式设计并以绝对单位工作(这样你至少可以获得一些尺寸) 3. 使用表格(即使在 html5 中也可以,如果你使它们“具有代表性”) 4. 只适用于部分浏览器 5. 重新计算每个 javascript 的大小 6.使用 flex 盒子 ...
关于html - DIV 随机移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16877456/