2

統計を表示するためにスケールを使用する Web サイトに取り組んでいます。

meterこのチュートリアルのように 、CSS3 と HTML5 要素を使用して、各スケールの背景グラデーションを作成しました: HTML5-Meter-Shim

デフォルトの色を表示する Chrome と Opera を除くすべてのブラウザで動作します。

これは Chrome と Opera で可能ですか、それとも他の解決策はありますか?

ここに私の作品があります： http://jsfiddle.net/KRnUd/2/

4

1 に答える 1

2

Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:

    <!doctype html>
    <html lang="en">
    <head>
        <title>Meter Usage</title>
        <style type="text/css">
    meter {
        display: inline-block;
        height: 16px;
        width: 200px;
        overflow: hidden;
        background-color: rgb(237,237,237);
        background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
    }
        </style>
    </head>
    <body>
        <meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
    </body>
    </html>

于 2012-10-07T23:19:25.343 に答える