响应边栏和输入

Question

我遇到包含输入的响应式菜单的问题。 原始帖子在这里： Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

如果我添加额外的li，带有输入（对于搜索字段），如果单击输入，我会跳转。只有在打开侧边栏之前滚动才会发生这种情况。

ul class="left">
      <li class="divider divider-first"></li>
      <li class="active"><a href="#_" class="toggle-nav">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#_" class="toggle-nav">Main Item 2</a></li>
      <li>
        <form method="get" action="/search.html">
          <input type="text" placeholder="Search" name="Search">
        </form>
      </li>
</ul>

这是额外的李的小提琴：http://jsfiddle.net/29qgW/5/ 如果您在iPhone上打开结果窗口，您可以看到它正在发生。

在侧边栏和顶部栏上方添加了某种边距。我试图用iOS模拟器找到它，但边缘并不是真的有样式。

如果在选择输入后尝试滚动，情况会变得更糟。怎么解决这个问题？我试图改变元标记以禁止用户缩放，但这不起作用。

有谁知道如何解决这个问题？

更新：已修改以显示元标记，并已关闭输入标记。