造型米棒为mozilla和safari

Question

我在我的米杆上使用以下css但不知何故造型在safari上不起作用（见下面的截图）。我对css很新，并在css下复制。根据评论，这应适用于所有浏览器。

eacda3：gold

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之间的比较，它应该在右边看。显示所有元素，但颜色和边框radis在前两个不起作用。

Answer 1

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

.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);
}

Answer 2

添加以下内容对我有用：

*::-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也以某种方式得到了修复