小编Hat*_*tiv的帖子

如果我input使用以下 CSS创建一个

input {
  border: none;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  padding: 0;
}

我预计 的高度为 16px input，但 Chrome 开发者工具显示的高度为 18px。

在 Firefox 中，高度为 16px。

是什么原因导致 Chrome 中出现额外的 2px？

小提琴： https: //jsfiddle.net/fh7upk0n/

我知道如果我想要固定高度，我必须使用 height，但我想知道 2px 来自哪里。

我有一个下拉菜单，其位置应取决于标题的高度。标题的高度根据内容、字体大小和媒体查询设置的填充而变化，这取决于视口高度。

HTML：

<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>

CSS：

body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 82px;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}

想象一下nav折叠起来的下拉菜单。

小提琴： https: //jsfiddle.net/mjufc63b/2/

如果将窗口的高度降低到 500 像素以下，标题和导航之间会出现白色间隙，但事实不应该如此。另外，如果您更改浏览器的字体大小。

有没有一种解决方案可以使下拉菜单始终位于标题下方，与标题高度无关，并且位于其他内容上方（绝对定位的作用），而不使用 javascript 并且无需移动nav外部header？

是否可以在没有参考的情况下复制文档 DOM（或其中的一部分）？

例如：

BodyCopy = document.body;
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

更新：

好的，clondeNode() 似乎首先起作用，但如果我这样做

BodyCopy = document.body.cloneNode(true);
document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

// Show edited copy
document.body = BodyCopy;

document.body.querySelector('#example').innerHTML = '<p>foo</p>';
BodyCopy.querySelector('#example').innerHTML = '<p>bar</p>';

// will output <p>bar</p>, but should be <p>foo</p>
console.log(document.body.querySelector('#example').innerHTML);

// will output <p>bar</p>
console.log(BodyCopy.querySelector('#example').innerHTML);

它不会像我预期的那样工作。请参阅JSFiddle。