顏色未在Safari中顯示，但一切在MSIE，FF和Chrome瀏覽器中均正常運行

Question

在Safari中，顏色無法正確顯示。 但是，一切都可以在IE，FF和Chrome中運行。

我想讓它跨瀏覽器工作。 有什么辦法可以做到這一點？

 @import url('http://fonts.googleapis.com/css?family=Ubuntu'); /*Basic Reset*/ * { margin: 0; padding: 0; } /** Dit zorgt voor dat inhoud in het midden blijft **/ /*Some fancy BG*/ /** body { background: url('http://thecodeplayer.com/uploads/media/bluebg.jpg') center center fixed; background-size: cover; } **/ .pricing_table { width: 600px; color: #fff; font-size: 12px; font-family: Ubuntu, arial, verdana; line-height: 150%; text-align: center; margin: 100px auto 0 auto; } /*Only the direct LI child, not the .features li*/ .pricing_table>li { background: linear-gradient(#666, #333); width: 33.33%; float: left; list-style-type: none; /*For smooth hover effects if .active is replaced by :hover*/ transition: all 0.2s; } h4, .pricing_table ul * { color: #fff; list-style-type: none; } .pricing_table>li.active { background: linear-gradient(#F9B84A, #DB7224); transform: scale(1.03); box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5); } .pricing_table h4 { /** h3 stond hier **/ text-transform: uppercase; padding: 15px 0; font-size: 14px; font-weight: bold; } .pricing_table .price_body { width: 125px; height: 125px; margin: 0 auto 15px auto; border: 2px solid #fff; border-radius: 90px; display: table; /** was eerst table **/ /** overflow: hidden; testje **/ } .price_body { width: 125px; height: 125px; } span.price_figure, span.price_term { display: block; margin-top: 24px; position: relative; left: -390px; color: #fff; } .price { display: block; float: left; padding: 12.5%; width: 95px; height: 95px; border-radius: 95px; -moz-border-radius: 95px; -webkit-border-radius: 95px; -khtml-border-radius: 95px; /** background:#eee; **/ text-align: center; } .pricing_table .price { font-size: 30px; font-weight: bold; text-transform: uppercase; /*Lets vertically center align the price now*/ vertical-align: middle; display: table-cell; } .pricing_table .price .price_figure { display: block; } .pricing_table .price .price_term { font-size: 11px; font-weight: normal; } .pricing_table .features .features ul.lijst li { list-style-type: none; padding: 5px 0; } .pricing_table .footer { padding: 10px; background: #333; margin-top: 10px; } /** Donkere knop zwart **/ li.action_button a.action_button { list-style-type: none; color: #fff; font-size: 11px; display: inline-block; text-decoration: none; font-weight: bold; background: #000; padding: 4px 20px; border-radius: 15px; background: linear-gradient(#666, #333); } /** Lichte knop oranje **/ li.action_button_active a.action_button_active { list-style-type: none; color: #fff; font-size: 11px; display: inline-block; text-decoration: none; font-weight: bold; background: #000; padding: 4px 20px; border-radius: 15px; background: linear-gradient(#F9B84A, #DB7224); } /** footer buttons **/ .pricing_table .footer .action_button { color: #fff; font-size: 11px; display: inline-block; text-decoration: none; font-weight: bold; background: #000; padding: 4px 20px; border-radius: 15px; background: linear-gradient(#666, #333); } .pricing_table li.active .footer .action_button { background: linear-gradient(#F9B84A, #DB7224); } .clr { clear: both; } 

 <ul class="pricing_table"> <li> <h4>Awesome Double NL</h4> <div class="price_body"> <div class="price"> <span class="price_figure">&euro; 17,99</span> <span class="price_term">per moaand</span> </div> </div> <div class="features"> <ul class="lijst"> <li class="action_button_active"><a title="Bestel nu Awesome Double NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=74" class="action_button_active" onclick="target='_blank';">Bestel Nu</a> </li> <li><strong>15000 MB</strong> Schijfruimte <br />+90 MB extra per maand</li> <li><strong>200 GB</strong> Dataverkeer <br />+1,2 GB extra per maand</li> <li><strong>10</strong> Domeinen Hosten</li> </ul> </div> <div class="footer"> <a title="Awesome Double NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=74" class="action_button" onclick="target='_blank';">Bestel nu</a> </div> </li> <!-- Active/Hover styles --> <li class="active"> <h4>Awesome Triple NL</h4> <div class="price_body"> <div class="price"> <span class="price_figure">&euro; 29,99</span> <span class="price_term">per maand</span> </div> </div> <div class="features"> <ul class="lijst"> <li class="action_button"><a title="Bestel nu Awesome Triple NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=75" class="action_button" onclick="target='_blank';">Bestel Nu</a> </li> <li><strong>40000 MB</strong> Schijfruimte <br />+180 MB extra per maand</li> <li><strong>600 GB</strong> Dataverkeer <br />+2,4 GB extra per maand</li> <li><strong>25</strong> Domeinen Hosten</li> </ul> </div> <div class="footer"> <a title="Bestel nu Awesome Triple NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=75" class="action_button" onclick="target='_blank';">Bestel nu</a> </div> </li> <li> <h4>Awesome Singular NL</h4> <div class="price_body"> <div class="price"> <span class="price_figure">&euro; 9,99</span> <span class="price_term">per maand</span> </div> </div> <div class="features"> <ul class="lijst"> <li class="action_button_active"><a title="Bestel nu Awesome Singular NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=73" class="action_button_active" onclick="target='_blank';">Bestel Nu</a> </li> <li><strong>7500 MB</strong> Schijfruimte <br />+45 MB extra per maand</li> <li><strong>100 GB</strong> Dataverkeer <br />+0,6 GB extra per maand</li> <li><strong>5</strong> Domeinen Hosten</li> </ul> </div> <div class="footer"> <a title="Bestel nu Awesome Singular NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;id=73" class="action_button" onclick="target='_blank';">Bestel nu</a> </div> </li> <!-- To prevent .pricing_table height collapse(as its children are floated) --> <div class="clr"></div> </ul> 

Safari為什么無法通過css按鈕和背景色顯示正確的顏色，如何解決這個問題使其在所有主流瀏覽器中都能正常工作？

感謝您閱讀此問題。

編輯1屏幕截圖

根據評論中的要求：我添加了2個屏幕截圖，以顯示什么不起作用。

注意：藍色箭頭在起作用，不是問題，只是沒有將其包含在Safari屏幕截圖中。...背景顏色和css按鈕使用的顏色是問題。

下圖是firefox 42的屏幕截圖，在MSIE和Chrome中也是如此。

下圖是Safari 5.1.7的屏幕截圖

Answer 1

對於舊版Safari，請使用： -webkit-linear-gradient(#FFF,#000) 。