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

Question

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

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

受影响的页面可以在这里找到。

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;
}