如何讓這個CSS在safari中工作

我目前正在不同的web瀏覽器中測試一些CSS。除Safari 5.1.7以外，這一切都很好。我正在測試這個fiddle。有誰知道我可以如何解決這個問題，因爲我想在網站中使用它。如何讓這個CSS在safari中工作

該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; 
}

來源

2016-08-17 Magearlik

其中的CSS的一部分不工作？ –

我不知道。它只是不在標題左側顯示紅線。但它適用於我測試Opera，Chrome，IE和Firefox的所有其他瀏覽器。 – Magearlik

個人而言，我不會擔心Safari的windows。這是一個死了的瀏覽器，因爲它已經多年沒有更新過了。用戶百分比必須低於1％ – Aaron

更好地利用內部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>

來源

2016-08-17 09:57:40

你能解釋一下嗎？ –

@GauravAggarwal我已經添加了一點解釋，它肯定能夠解決這個問題，但我沒有打算在每個瀏覽器中解釋'：after'和'：before'的不同行爲。 –

如何讓這個CSS在safari中工作

回答

相關問題