菜单向下调整大小，响应式设计，仅限某些浏览器

Question

我目前正在处理this site，我在Safari和Chrome（最新版本）的顶级菜单导航方面遇到了问题。它适用于Firefox，甚至可以在最新的Internet Explorer中使用！

有四种响应式解决方案;标准和最大宽度，iPad肖像，iPhone风景和iPhone肖像。在iPhone肖像以外的所有分辨率上来回调整大小时不会出现此问题。从iPhone纵向调整大小时，顶部菜单导航会跳转到标题的底部边框下方。

我已经尝试过查看我的媒体查询以获取iPhone版画，并且无法弄清楚问题是什么。

我希望你能帮助我提供我所提供的小信息，把所有代码都扔进一个jsfiddle是太精心了。

Answer 1

我真的没有看到为什么这种情况发生了，但是如果你将overflow: hidden添加到#main-header，你会看到是什么发生。有一点浮动混乱，如果你在HTML中的块元素之后有正确的浮动元素，这是IE6中的一个常见问题...如果你在标题上保留隐藏的溢出并将float: left添加到{{1但它对我有用。

Answer 2

你的标题应该以不同的方式处理你的内部元素应该有内联块; header应该具有宽度为100％的内联块，这将受父宽度的影响 它应该解决您的响应问题

Answer 3

我挖了一下并用不同的css选项进行了一些测试，我发现我实际上忘了在主标题div上放置一个高度，并清除它下面的container-div。我这样做了，它解决了这个问题。

我知道我所拥有的一些代码，即导航并没有完全按照应有的方式完成，但它现在适用于所有浏览器和分辨率，而且这是重要的部分。

感谢您带领我朝着正确的方向前进！