1

因此,请查看以下代码片段:

html {
    font-family:'Roboto Condensed', sans-serif;
    text-align: center;
}
em {
    font-style:italic;
}
h1 {
    color: #444;
    font-weight: 700;
    position: relative;
    margin-bottom: 30px;
    padding: 0;
    border-bottom: 0;
    font-size: 56px;
    text-transform: uppercase
}
h1:after {
	position: absolute;
	width: 70px;
	content: "";
	border-bottom: 6px double #ff6b53;
	bottom: -10px;
}
p {
    margin-bottom:60px;
}
span {
    background:rgba(255, 107, 83, 0.75);
    border-radius:3px;
    color:#fff;
    font-weight:bold;
    padding:5px;
}
.heading1:after {
    left: calc(50% - 35px);
}
.heading2:after {
    left:50%;
    margin-left:-35px;
}
<h1 class="heading1">Some Heading 1</h1>
<p><em>Using <span>left: calc(50% - 35px)</span>.</em></p>
<h1 class="heading2">Some Heading 2</h1>
<p><em>Using <span>left:50%</span> and <span>margin-left:-35px</span>.</em></p>

在运行在 webkit 引擎上的 chrome 中,:after伪元素在这两种情况下都正确居中。

但是,在 Safari 中,calc(50% - 35px)似乎不起作用,并且伪元素与元素的右侧对齐。

我的问题是:有人知道为什么,考虑到 Safari 也是基于 webkit 的吗?根据MDN的说法, Safaricalc提供支持buggy,但没有解释原因。

4

0 回答 0