【问题标题】:after pseudo element does not work correctly in hr tag on Internet Explorer在 Internet Explorer 的 hr 标记中伪元素无法正常工作之后
【发布时间】:2015-10-15 17:10:27
【问题描述】:

以下代码适用于除 Internet Explorer 之外的所有浏览器。 在 IE 中,措辞似乎被压缩为 1px height 或被 hr 渐变覆盖。 是什么导致了这个问题?

.hr-how {
  text-align: center;
  border: 0;
  height: 1px;
  margin-bottom: 40px;
  margin-top: 40px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.hr-how:after {
  content: "HOW TO USE IT";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 0.9em;
  padding: 0 0.6em;
  background: white;
}
<hr class="hr-how" id="hr-how">

http://jsfiddle.net/y8nx51rf/

【问题讨论】:

    标签: html css internet-explorer


    【解决方案1】:

    这是因为hr 标签上overflow 的默认设置在 Chrome 和 Firefox 中是 visible,但在 IE 中是 hidden。这会导致hrheight 之外的任何内容在IE 中被截断。

    要在 IE 中进行这项工作,请将 overflow: visible; 添加到 .hr-how,以便文本可以扩展到 hr 的边界之外。

    .hr-how {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
      border: 0;
      height: 1px;
      margin-bottom: 40px;
      margin-top: 40px;
      overflow: visible;
      text-align: center;
    }
    .hr-how:after {
      background: white;
      content: "HOW TO USE IT";
      display: inline-block;
      font: "BodoniXT" !important;
      font-size: 0.9em;
      padding: 0 0.6em;
      position: relative;
      top: -0.7em;
    }
    <hr class="hr-how" id="hr-how" />

    【讨论】:

    • 感谢您的回答!现代 Chrome 似乎也默认为溢出:隐藏在 hr 元素上。我必须全局设置,这样我的 :before 伪/背景图像才会显示出来。