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、ブラウザ間で同様の結果が得られるまでには時間がかかります。

ただし、設定を試すことができます。4box-shadow: 0px 0px 0px 10px #000; 番目のプロパティは、影の拡大 (この場合は境界線のサイズ) を設定します。5 番目のプロパティは色です。

欠点は、境界線のスタイルが得られず、実線の境界線しか得られないことです

スニペット:

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-barchrome で境界線を設定することです。

@-moz-document url-prefix()これを行うには、ハックを使用できます。

@-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 に答える