Safari에서이 CSS를 사용하려면 어떻게해야합니까?

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 내부 요소 left 및 right 속성 :before 및 :after을 사용 여기

코드이다. 이것은 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>