[英]Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers
In Safari the colors are not showing up correctly. 在Safari中,颜色无法正确显示。 However everything is working in IE, FF and Chrome.
但是,一切都可以在IE,FF和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">€ 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&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&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">€ 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&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&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">€ 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&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&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? Safari为什么无法通过css按钮和背景色显示正确的颜色,如何解决这个问题使其在所有主流浏览器中都能正常工作?
Thank you for reading this question. 感谢您阅读此问题。
As requested in the comments: I added 2 screenshots to show what is not working.. 根据评论中的要求:我添加了2个屏幕截图,以显示什么不起作用。
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.. 注意:蓝色箭头在起作用,不是问题,只是没有将其包含在Safari屏幕截图中。...背景颜色和css按钮使用的颜色是问题。
The picture below is a firefox 42 screen capture, it looks like this in MSIE and Chrome as well. 下图是firefox 42的屏幕截图,在MSIE和Chrome中也是如此。
The picture below is a Safari 5.1.7 screen capture 下图是Safari 5.1.7的屏幕截图
对于旧版Safari,请使用: -webkit-linear-gradient(#FFF,#000)
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.