html在同一浏览器中呈现不同

Question

我正在创建一个简单的博客模板。在模板的右上角，标题中有一个搜索框。搜索框应该出现在那里，但有时会出现在标题下面。

这种情况时不时发生，如果我刷新页面几次，那么这个方框会有一些跳跃位置。我使用Google Chrome进行开发这个页面的html纯粹是静态的，所以我不知道为什么会发生这种情况。任何人都可以找出为什么这个盒子跳来跳去。

可以找到受影响的页面here。

Answer 1

我无法重新创建您的问题，但我确定将position:relative添加到nav或.wrapper

.wrapper {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

和position:absolute到搜索框会阻止任何跳跃。

header#top #searchBox {
  position:absolute;
  top: 0;
  right: 0;
  display: block;
  width: 240px;
  height: 45px;
  // line-height, any other styles
}

Answer 2

尝试以下

header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;

text-align: right;}

Answer 3

解决方案非常简单，

只是ad float：left;到菜单元素（标题#top nav ul）

header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}

比你只需要为包装器添加高度

.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}