Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

Question

In Safari the colors are not showing up correctly. However everything is working in IE, FF and Chrome.

I'd like to make it work cross-browser. Is there any way to accomplish that?

 @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> 

Why doesn't Safari show the right colors fpr my css buttons and background color and how can this be solved to make it work in all major browsers?

Thank you for reading this question.

EDIT 1 Screenshots

As requested in the comments: I added 2 screenshots to show what is not working..

Note: The blue arrow is working and is not an issue, just didn't incude it to the Safari screen capture... The background color and the color used by the css buttons are the issue..

The picture below is a firefox 42 screen capture, it looks like this in MSIE and Chrome as well.

The picture below is a Safari 5.1.7 screen capture

Answer 1

对于旧版Safari，请使用： -webkit-linear-gradient(#FFF,#000) 。