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; 第四个属性设置阴影扩展（在这种情况下为边框大小）。第五个属性是颜色。

缺点是你没有获得边框样式，只有一个实心边框

<强>片段：

＆＃13;

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

＆＃13;

<meter value="50" min="0" max="100">

＆＃13;

Answer 2

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

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

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

以下是一个例子：

＆＃13;

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

＆＃13;

<meter value="50" min="0" max="100"></meter>

＆＃13;

在Chrome和Firefox中的米元素边框

2 个答案: