css - 仅当在无样式的 HTML Details 标签内时，表单元素样式不正确

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%;
}