颜色没有显示在Safari中，但一切都在MSIE，FF和Chrome浏览器中运行

时间：2015-11-19 11:46:55

标签： html css colors background safari

在Safari中，颜色未正确显示。但是一切都在IE，FF和Chrome中运行。

我想让它跨浏览器工作。有没有办法实现这个目标？

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

为什么Safari不显示正确的颜色fpr我的css按钮和背景颜色以及如何解决这个问题以使其在所有主流浏览器中都能正常工作？

感谢您阅读此问题。

编辑1截图

根据评论中的要求：我添加了2个屏幕截图，以显示哪些内容无效..

注意：蓝色箭头正常工作，不是问题，只是没有将其包含在Safari屏幕截图中...... 背景颜色和css按钮使用的颜色是问题..

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

下图是Safari 5.1.7屏幕截图 Safari 5.1.7 screenshot

1 个答案:

答案 0 :(得分：2)

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

相关问题
最新问题