Firefox hr不透明度显示不同答案

【问题标题】：Firefox hr opacity display differentFirefox hr不透明度显示不同
【发布时间】：2014-03-20 22:13:42
【问题描述】：

<hr style="opacity:0.4" />

我对 firefox hr 不透明度有疑问，它在除 firefox 之外的所有其他浏览器上都能正常工作

有人知道如何解决这个问题吗？

【问题讨论】：

对我来说很好。什么版本的火狐。你有其他可能影响它的代码吗？

标签： html css firefox opacity

【解决方案1】：

它应该可以正常工作，但我认为您是在谈论 Firefox 的 3d 默认 hr 渲染 hr，为了使整个浏览器的样式保持一致，重置 border，并应用 @987654327再次@

hr {
   border: 0;
   border-top: 1px solid #f00;
   opacity: .1;
}

Demo

如果不想使用opacity，也可以使用rgba()

border-top: 1px solid rgba(255,0,0,.1); //Equivalent to opacity: .1; for red color

另一方面，如果你愿意，你也可以声明一个名为noshade="noshade"的属性

<hr style="opacity:0.4" noshade="noshade" />

Demo

【讨论】：

【解决方案2】：

让我们试试这个：

opacity:0.5 /*All modern browser support*/
-webkit-opacity: 0.5; /*For webkit browser*/
-moz-opacity: 0.5; /*For Firefox Browser*/
filter:alpha(opacity=50);/*For IE8 and lower*/

【讨论】：

仅限旧版本。最新版本现在支持opacity 作为标准。
我知道现代浏览器支持 opactiy。无需使用-moz-、webkit、-khtml。但你能确定互联网上的所有用户都使用最新的浏览器吗？添加 -moz 和 -webkit 只是为了在任何用户仍在使用旧版浏览器时进行后备。
Firefox supports opacity 2.0 版的属性，所以你认为 OP 使用的是 firefox 1.0 吗？
@Mr.Alien 你是对的 -moz-opacity 在 Firefox 上不再工作，因为版本 3 已经到来。感谢分享信息。