Html 响应调整后，铬合金中的元素错位

我曾尝试在一个浏览器上添加一些简单的响应，但Chrome中出现了一些奇怪的问题，我不知道如何解决

问题是在右上角的搜索栏中，应该放在左图像中的条形图的中间。< /P> 如果我减小浏览器的宽度，直到搜索栏跳转到菜单下面（顺便说一句，效果很好），然后重新调整它的大小，搜索栏就会像右边一样结束

如果我刷新页面，它会跳回到应该的位置。在FireFox和IE中，它的工作方式与我预期的一样。我错过了什么

---

来源较少

---

我用

显示：内联块更改此行至
显示：内联表格：

#header h1, #header nav, #header form, #header img, #header ul, #header li, #header input {
    margin: 0px;
    padding: 0px;
    display: inline-table; /* This */ 
    vertical-align: middle;
}

它在FF和Chrome中工作

更新

为了更好的解决方案或“不那么难看”：

我将
包装到
标签中，请参见此处：

这里是CSS的一部分：

/* REMOVE HERE THE FLOAT RIGHT */
#header #search { margin-top:-3px; }    

#header #search input{width:200px;padding:3px 7px;font-size:90%;border-radius:3px;}

/* SET HERE THE FLOAT RIGHT AND DISPLAY INLINE */
#searchForm { float: right; display: inline;}

h1:first-child,article:first-child{margin-top:0;}

@media only screen and (max-width: 850px){

  #header nav ul{margin-top:.5em;display:block;}
  #header h1,#header ul li{margin-right:0;}      
}

@media only screen and (max-width: 550px){

  #header{text-align:center;}
  #header #search{margin-top:.5em;display:block;float:none;}
  #header #search input{width:95%;}

  /* SET HERE THE FLOAT NONE */
  #searchForm{float: none;}
}

HTML:



经过FF和Chrome测试，我希望这对您有更多帮助。
这似乎确实有效。我当然想知道它为什么坏了。我的英语不是最好的解释，我比理论开发者更实际。。。但是这里可能有一个很好的信息来说明这两者之间的区别：
display:inline块和
显示：内联表我理解其中的区别。我不知道的是为什么Chrome会在调整大小之前以一种方式呈现布局，而在调整大小之后以另一种方式呈现布局。我还要说的是，使用与此表相关的显示模式感觉有点难看。。。。。。所以，基本上你说的是设计一个包装
div
，而不是一个独立的
表单
？
<!-- WRAP THE FORM INTO A DIV-->

    <div id="searchForm">
        <form id="search" role="search" action="search" method="get">
            <input type="search" name="term" placeholder="Song title or number..." tabindex="1">
        </form>
    </div>