【问题标题】:Style <meter> tag in latest Opera version最新 Opera 版本中的样式 <meter> 标签
【发布时间】:2011-08-29 09:43:43
【问题描述】:

我目前正在尝试在所有主流浏览器中设置&lt;meter&gt; 标签的样式:IE7-9、FF、Chrome、Safari 甚至 Opera。我已经设法使用以下 CSS 代码删除了默认的 &lt;meter&gt; 样式:

meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
  background: 0;
}

这项技术在所有提到的浏览器中都可以正常工作,除了 Opera!它一直显示默认的绿色仪表。关于如何在 Opera 中“去除”&lt;meter&gt; 标签的任何想法?

【问题讨论】:

    标签: css html browser opera meter


    【解决方案1】:

    目前还没有办法在 Opera 中设置此类元素的样式。有一个名为 Component Object Model 的提案,它允许我们在工作草案中进行这种样式设置,但我们还没有接近。

    Webkit 实现了一个没有任何标准的方法,只是一个建议,我不认为将来会这样。这些伪元素名称很可能会改变。

    【讨论】:

      【解决方案2】:

      在我开始之前:不应该是background: transparent; 还是background: inherit;?请参阅background property in HTML Dog。


      我认为你误会了。 meter::-webkit-meter-bar 选择器应该对 IE、FF 和 Opera 完全没有影响,因为 -webkit 部分是 Webkit 的选择器。 Chrome 和 Safari 使用 Webkit 作为渲染引擎,但 FF 使用 Gecko,Opera 使用 Presto 等。

      对于 FF,您可能需要类似 -moz-meter-bar...
      对于歌剧我不知道。 This Opera community page 似乎暗示前缀是 -o 而不是 -webkit 或 -moz。
      祝你好运。

      在添加此类规则时包含“普通”选择器也是一个好习惯。
      (如果你幸运的话,这可能会让它在 Opera 中运行。)

      meter::-webkit-meter-bar,
      meter::-webkit-meter-optimum-value,
      meter::-webkit-meter-suboptimum-value,
      meter::-webkit-meter-even-less-good-value,
      meter::meter-bar,
      meter::meter-optimum-value,
      meter::meter-suboptimum-value,
      meter::meter-even-less-good-value {
        background: transparent;
      }
      

      【讨论】:

      • 您也可以使用transparent 和inherit,但是当我使用速记时,0 就足够了。见evotech.net/blog/2008/08/css-background-properties/#bg6。它只会以这种方式识别背景位置,并使用transparent 作为默认背景颜色。此外,0 是最短的值。它节省空间:)。不幸的是,您的解决方案不起作用。我会尝试更深入地挖掘!附言我知道那些 -webkit 选择器仅用于 Safari 和 Chrome :)。到目前为止,FF 和 IE 不需要任何重置
      • 啊,不错,用bg-position很聪明。
      • :) 顺便感谢您的帖子。如果我看到弹出的解决方案,我会在这里发布。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-08-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-29
      • 2012-04-18
      • 2016-06-19
      相关资源
      最近更新 更多