以下代码适用于除Internet Explorer以外的所有浏览器。
在IE中,措辞似乎被压缩为1pxheight或被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/

最佳答案

这是因为Chrome和Firefox中overflow标签的默认设置是hr,而IE中visible。这会导致IE中hidden之外的任何内容被切断。
若要在IE中运行,请将height添加到hr中,以便文本可以扩展到overflow: visible;的边界之外。

.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" />

10-05 20:42
查看更多