2

尝试设置 HTML5meter元素的样式时，我注意到 Chrome 以与 Firefox 不同的方式呈现边框。实际上，它完全忽略了颜色。

meter {
  width: 400px;
  height: 50px;
  
  background: #ccc;
  
  border: 5px solid #f00;
}

meter::-webkit-meter-bar {
  background: #ccc;
}

meter::-webkit-meter-optimum-value {
  background: #0a0;
}

meter::-moz-meter-bar {
  background: #0a0;
}
<meter value="50" min="0" max="100">

添加边框以-webkit-meter-bar在 Chrome 中按预期工作，但如果我为meter（对于 Firefox）和-webkit-meter-bar（对于 Chrome）添加边框，则该元素将在 Chrome 中具有双边框。

为什么 Chrome 会忽略边框颜色，meter除了使用带有自己边框的包装器外，有没有办法以这样的方式设置样式，使其在 Chrome 和 Firefox 中看起来相同？

4

2 回答 2

2

由于meter是一个相对较新的元素，因此跨浏览器获得类似结果需要时间。

但是，您可以尝试设置box-shadow: 0px 0px 0px 10px #000; 第四个属性设置阴影扩展（在这种情况下为边框大小）。第五个属性是颜色。

缺点是没有边框样式，只有实心边框

片段：

meter {
  width: 400px;
  height: 50px;
  padding:0;
  border: 5px solid #f00;
}

meter::-webkit-meter-bar {
  background: #ccc;
}

meter::-webkit-meter-optimum-value {
  background: #0a0;
}

meter::-moz-meter-bar {
  background: #0a0;
}

meter{
  box-shadow:0px 0px 0px 5px #f00;
  }
<meter value="50" min="0" max="100">

于 2016-11-22T15:13:43.707 回答
1

您在这里获得的唯一选择是在 Firefox 和 chrome 中为仪表的边框赋予不同的样式（Firefox 中的边框，chrome 中没有边框），并使用-webkit-meter-bar设置 chrome 中的边框。

您可以使用@-moz-document url-prefix()hack 来执行此操作：

@-moz-document url-prefix() {
    meter {
        border: 5px solid #f00;
    }
}

这是一个例子：

meter {
  width: 400px;
  height: 50px;
  background: #ccc;
}

@-moz-document url-prefix() {
    meter {
        border: 5px solid #f00;
    }
}

meter::-webkit-meter-bar {
  background: #ccc;
  border: 5px solid #f00;
}

meter::-moz-meter-bar {
  background: #0a0;
}

meter::-webkit-meter-optimum-value {
  background: #0a0;
}
<meter value="50" min="0" max="100"></meter>

于 2016-11-22T15:27:22.477 回答