DIV随机移动

当我加载我的页面时，我的页面上浮动右边的一个DIV有时会向下移动。当我刷新页面时，它通常会恢复正常，但是如果我发送刷新密钥，则经常会再次下移。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的第一篇文章，我对编程比较陌生。也许你想建议我如何更好地设置我的帖子的格式，或者更好地缩短我的帖子。 ;）

来源

2013-06-01 T.J. Mazeika

只是一个旁注：你并不需要使用单位为0，例如填充：0;很好。 – griffin

你在说什么浏览器？不同的浏览器行为有所不同。

如果我猜测，你可能有一个四舍五入错误的问题。尝试使用绝对单位首先（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.重新计算大小...

来源

2013-06-01 21:58:30 griffin

这发生在Chrome中。我只是在IE 9中尝试过，这很好，但我不能积极的将它工作。我对绝对单位有点警惕，但是我的选择性强迫症（OCD）只是挡道而已。 ;） **编辑：**我只是在垃圾邮件刷新后在Chrome中重试它，它似乎工作正常。我不记得改变任何东西！（然而，我们会看到持续多久） –

DIV随机移动

回答

相关问题