3

我在我的仪表条上使用以下 css，但不知何故，样式在 safari 上不起作用（见下面的截图）。我对 css 很陌生，并在 css 下复制。根据评论，这应该适用于所有浏览器。在此处输入图像描述

eacda3：黄金

607d8b：深绿色

HTML：

<meter min="0" value="<%=info["home_prob"]%>" max="100" id ='H<%=id%>'>
    </meter> <span> <%=info["home_prob"]%>%</span></p>

CSS：米{高度：20px；宽度：80%；}

meter::-webkit-meter-bar {
    background: #607d8b;
    border: 4px solid #485563;
    border-radius: 9px;
}

meter::-webkit-meter-optimum-value {
    border-radius: 9px;
    background: #eacda3; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

编辑：屏幕截图是 Mozilla 和 Safari（左）和 Chrome 之间的比较，它应该看起来在右边。所有元素都显示，但颜色和边框半径在前两个上不起作用。

4

2 回答 2

1

添加以下内容对我有用：

*::-moz-meter-bar {
    -moz-appearance: meterchunk;
    display: inline-block !important;
    float: none !important;
    position: static !important;
    width: 100%;
    height: 12px;
    overflow: visible !important;
    background: #607d8b;
    border: 4px solid #485563;
}
:-moz-meter-optimum::-moz-meter-bar {
    background: linear-gradient(to left, #eacda3 , #d6ae7b);
    border-radius: 9px;
}

这个 CSS 适用于 Mozilla，而 safari 也因此得到了修复

于 2016-08-01T20:13:21.923 回答
0

看起来像一个挑剔的元素。只需在它周围包裹一个 div（在这种情况下，我称之为“.meter”），然后对其应用边框属性，并使用溢出：隐藏。然后将父容器的高度与仪表匹配。

.meter {
  display: inline-block;
  height: 20px;
  overflow: hidden;
  border: 2px solid #485563;
  -moz-border-radius: 10px;
  /*Firefox*/
  -webkit-border-radius: 10px;
  /*Safari, Chrome*/
  border-radius: 10px;
}
.meter meter {
  height: 20px;
}
.meter meter:-webkit-meter-bar {
  background: #607d8b;
}
.meter meter:-webkit-meter-optimum-value {
  border: 2px solid #000;
  -moz-border-radius: 10px;
  /*Firefox*/
  -webkit-border-radius: 10px;
  /*Safari, Chrome*/
  background: #eacda3 !important;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #eacda3, #d6ae7b);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #eacda3, #d6ae7b);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}
于 2016-07-27T21:06:04.960 回答