Chrome 和 Firefox 中 meter 元素的边框

Question

尝试设置 HTML5 meter 元素的样式时，我注意到 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 中看起来一样，除了使用包装器有自己的边界？

Answer 1

由于 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">

Answer 2

你在这里得到的唯一选择是在 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>

Chrome 和 Firefox 中 meter 元素的边框

Border around meter element in Chrome and Firefox

html

css

firefox

google-chrome

meter