时间戳

首页 > 解决方案 >

标签以不同的高度呈现

html -
标签以不同的高度呈现

问题描述


我的网站上的一些<hr>标签有问题。
参考图像

正如您在这个非常简单的小提琴https://jsfiddle.net/bau1hp9L/中看到的那样，<hr>标签并不都以相同的高度呈现。

的 CSS<hr>非常简单，所以不会受到其他东西的干扰......

hr {
  border: 0;
  height: 1px;
  background-color: #243588;
}

关于为什么会发生这种情况的任何想法？

我希望所有的<hr>都有 1px 的高度。

更多信息：

  • 如果我在浏览器中调整 css，它并不总是显示更大的相同项目。例如，我将高度设置为 1px，然后设置为 0.5px，然后返回等.. - 现在它是一个不同的<hr>标签，显示得更厚（不幸的是，无法在 jsfiddle 中重现）

  • 如果我将<hr>' 设置为height: 0.5px，那么现在<hr>太大的会以 1px 的高度呈现 - 根据需要，但另一个会<hr>随机消失。

  • 如果我设置height: 0.05em我得到所有 's 所需的 1px 高度，<hr>但它对我来说似乎有点 hacky ......我真的不想根据父 div 的字体大小来缩放高度。我希望它的高度为 1px。

    编辑：请尝试垂直调整您的 JSFiddle 预览窗口的大小 - 然后您最终也会遇到这种行为。

    有什么猜测吗？

    • 标签： htmlcss

    解决方案

    尝试切换到“薄”而不是指定像素高度：

    hr {
  border-top: thin solid #243588;
}

    在所有缩放级别上都为我解决了这个问题。（到目前为止，仅在 Chrome 和 Opera 中进行了测试。）它也感觉更具描述性：我不在乎它有多少像素，我只是希望它看起来像一条细线。

    在这里找到（在输入框的上下文中），他们从https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc获得它（似乎它是大约 2 年前在 Chrome 62 中引入的一个错误/功能）。

    推荐阅读