1

当我加载我的页面时，我的页面上浮动的一个 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 上的第一篇文章，我对编程比较陌生。也许您想建议我如何更好地格式化我的帖子或更好地缩短它。;)

4

1 回答 1

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 ...

于 2013-06-01T21:58:30.470 回答