Question

我目前正在不同的网络浏览器中测试一些CSS。除了Safari 5.1.7之外，这一切都很有效。我正在测试这个fiddle。有谁知道如何解决这个问题，因为我想在网站上使用它。

css应该显示一个带有彩色线条的标题。

以下是代码：

[HTML]

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

[CSS]

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

Answer 1

最好在h1中使用一个元素，并将:before和:after与left和right属性一起使用。这适用于大多数浏览器，包括Safari。

h1 {
  overflow: hidden;
  font-size: 30px;
  text-align: center;
}
h1 span {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 5px;
}
h1 span:before, h1 span:after {
  background-color: red;
  position: absolute;
  margin-top: -1px;
  width: 9999px;
  top: 50%;
  height: 1px;
  content: '\a0';
  left: 100%;
}
h1 span:before {
  left: auto;
  right: 100%;
}
.color {
  background-color: #ccc;
}

<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
  <h1><span>Just Title</span></h1>
</div>

如何让这个CSS在safari中工作

1 个答案: