html - 颜色在 Safari 中不显示，但在 MSIE、FF 和 Chrome 浏览器中一切正常

标签 html css colors background safari

在 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 中也是这样。 firefox 42 screenshot

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

最佳答案

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

关于html - 颜色在 Safari 中不显示，但在 MSIE、FF 和 Chrome 浏览器中一切正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33803057/

上一篇：Sitecore 8.1 输出缓存未清除

下一篇：git - 如何使用 Github Desktop 从远程存储库提取更改而不推送本地更改

相关文章：

html - parent 和 child 高度相同，为什么会有垂直滚动条？

html - 如何制作响应式英雄广告

android - Android 中具有动态 ActionBar 颜色的半透明 StatusBar

javascript - Deobfuscate JS 混淆脚本用于在服务器端执行它

javascript - Safari 不会在溢出的 SVG 内容上发出指针事件

html - 按钮在页面加载时显示在上方

html - 如何将多个 CSS 文件编译成一个 zip/tar 文件并将它们包含在 HTML 页面标记中？

jquery - 如何将图像定位在固定的响应式 Bootstrap 图像上

user-interface - iOS - 匹配界面颜色

css - 在 CSS 中对 RGB 颜色值使用十六进制而不是十进制有什么好的理由吗？

©2024 IT工具网  联系我们