表单元素样式仅在未样式化的HTML详细信息标记中

Question

从Bulma CSS框架文档中获取的示例表单控件可以使用Bulma 0.7.2（在撰写本文时为最新版本）按预期工作。

但是，将表单放在标准html <details>标记中时，元素的高度会发生变化，（输入的宽度会有所变化？），因此将鼠标悬停在输入上方时会出现视觉故障

这是什么原因造成的，并且可以将一种样式应用于<details>标签，以使表单元素正确显示吗？

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Search
    </a>
  </div>
</div>

<br>
<br>

<details>
  <div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Search
    </a>
  </div>
</div>
</details>

编辑：作为一个更简单的示例，<input class="input" type="text" placeholder="Find a repository">标记内的单个<details>元素的样式也是错误的。

Answer 1

发生这种情况的原因是，输入和按钮的填充基于em进行计算，并且由于输入位于<details>标记内，因此它一定程度上会干扰比例-参见下图：

我对这个框架不熟悉，我不确定是否有办法解决这个问题。无论如何，最快的解决方法是将目标对准<details>标记内的输入和按钮，并向按钮和<details>内的输入都添加一个静态的padding-top和padding-bottom值（均为0）标签：

details .input,
details .button{
  padding-bottom: 0;
  padding-top: 0;
}

在那之后，我发现如果将输入的最大宽度减小到89％而不是100％，它会解决以下问题：

details .input{
  max-width: 89%;
}