html - 固定菜单栏在页面左侧的位置

Question

我有一个描述菜单栏的 HTML 文件。菜单栏具有以下格式，我将其作为 iframe 导入到其他 HTML 文件中:

<ul> class="navbar">
  <li><a href="home.html">Home</a></li>  
</ul>

(当然有更多的 li 和正确的语法 :) )

我有以下 CSS:

ul.navbar, iframe {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em 
}

因此，当我单击菜单栏中的链接时，菜单栏会向右移动一点。为什么会这样？ :/

Answer 1

由于问题不提供 jsFiddle，并且不清楚您在其中使用它的上下文，所以我只会在这里猜测。

用户交互后 iframe 中的菜单栏向右移动的最可能原因是因为 iframe 的滚动能力。解决方案可能是将 overflow: hidden; 设置为 iframe 并将以下样式设置为 iframe 中的所有元素，因此不是 iframe 本身的样式。类似于:*{margin: 0px;padding: 0px;} html,body{width: 100%;height: 100%;} 会很好。

请更具体地说明您的情况。 iframe 的 HTML 内容到底是什么，iframe 的上下文包括所有 CSS 信息。然后将其放入 jsFiddle 或格式化代码中。

可能您的问题与聚焦时 iframe 滚动有关。