以下代码适用于除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/
最佳答案
这是因为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" />