サファリの線形勾配が機能しない

Question

サファリブラウザで直線勾配の背景のプロパティが機能しません。-webbkit-接頭辞も使用しましたが、結果はありませんでした。どうしましたか？

HTML：：

<header> 
    <div class="container"> 
     <div class="logo"> 
     <img src="images/logo.png" alt=""/> 
     </div> 
    </div> 
</header> 

CSS：

.container{max-width:1550px;margin:0 auto;border:1px solid red;} 
.clear{clear:both;} 
header{width:100%;float:left;position:relative;background:linear-gradient(to right, #e9eae2 0%,#e9eae2 59%,#7acec3 59%,#7acec3 100%);background:-webkit-linear-gradient(to right,#e9eae2 0%,#e9eae2 59%,#e9eae2 59%,#e9eae2 100%);} 
.logo{float:left;} 

Answer 1

線形勾配のためのすべてのプレフィックスを使用してみてください：

background: -moz-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* FF3.6+ */ 
background: -webkit-gradient(linear, 0deg, color-stop(0%, #e9eae2), color-stop(59%, #e9eae2), color-stop(59%, #7acec3), color-stop(100%, #7acec3));/* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Opera 11.10+ */ 
background: -ms-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae2', endColorstr='#7acec3', GradientType='1'); /* for IE */ 
background: linear-gradient(90deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%); 

Answer 2

こんにちはリニアここ

コードですグラデーションがうまくいきますサファリ、私はいくつかの異なる色で試してみたように、すべてのプレフィックスを使用しようとしました：

header{width:100%;float:left;position:relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */ 
background: #87e0fd; /* Old browsers */ 
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); /* IE6-9 */ 
}