Html CSS不透明度在Firefox中工作&；Internet Explorer，但不是Chrome&；Safari（网络工具包）

我正在开发的asp.NET页面上有一个奇怪的问题。我在设计时使用“CssClass”属性设置.NET超链接控件的不透明度。不透明度在Firefox和IE中生效，但在Chrome和Safari中无效

我正在使用的浏览器版本：

铬：49
Internet Explorer:11
Firefox:44.0.2
狩猎：5.1.7

工作片段：

正文{
颜色：白色；
}
.menuContent{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.menuTable{
表布局：固定；
宽度：300px；
高度：300px；
边界间距：40px；
}
.费用{
高度：300px；
宽度：300px；
文本对齐：居中；
边框：5px纯白；
背景剪辑：填充框；
边界半径：20px；
字体大小：粗体；
字号：2.5em；
垂直对齐：中间对齐；
溢出：隐藏；
}
梅努利克先生{
颜色：白色；
文字装饰：无；
保证金：-10em；
填充物：10em；
}
.ExpenseCell:悬停{
背景颜色：淡蓝色；
边框颜色：黄色；
颜色：黄色；
}
.费用{
背景色：rgb（22167,67）；
}
.disabledMenuItem{
不透明度：0.1；
游标：默认值；
}

---

这是Safari等WebKit浏览器以及Chrome和Opera等WebKit派生的Blink浏览器中的一个长期缺陷。基本上，不透明度通常不适用于内联显示状态，如

display:inline

元素（这是

a

标记的默认值）

解决此问题的最常用方法是将显示状态更改为类似于，

display:block

或

display:inline block

工作示例： 将

显示：内联块

添加到

.menuLink

正文{
颜色：白色；
}
.menuContent{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.menuTable{
表布局：固定；
宽度：300px；
高度：300px；
边界间距：40px；
}
.费用{
高度：300px；
宽度：300px；
文本对齐：居中；
边框：5px纯白；
背景剪辑：填充框；
边界半径：20px；
字体大小：粗体；
字号：2.5em；
垂直对齐：中间对齐；
溢出：隐藏；
}
梅努利克先生{
颜色：白色；
文字装饰：无；
保证金：-10em；
填充物：10em；
显示：内联块；
}
.ExpenseCell:悬停{
背景颜色：淡蓝色；
边框颜色：黄色；
颜色：黄色；
}
.费用{
背景色：rgb（22167,67）；
}
.disabledMenuItem{
不透明度：0.1；
游标：默认值；
}

---

这是Safari等WebKit浏览器以及Chrome和Opera等WebKit派生的Blink浏览器中的一个长期缺陷。基本上，不透明度通常不适用于内联显示状态，如

display:inline

元素（这是

a

标记的默认值）

解决此问题的最常用方法是将显示状态更改为类似于，

display:block

或

display:inline block

工作示例： 将

显示：内联块

添加到

.menuLink

正文{
颜色：白色；
}
.menuContent{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.menuTable{
表布局：固定；
宽度：300px；
高度：300px；
边界间距：40px；
}
.费用{
高度：300px；
宽度：300px；
文本对齐：居中；
边框：5px纯白；
背景剪辑：填充框；
边界半径：20px；
字体大小：粗体；
字号：2.5em；
垂直对齐：中间对齐；
溢出：隐藏；
}
梅努利克先生{
颜色：白色；
文字装饰：无；
保证金：-10em；
填充物：10em；
显示：内联块；
}
.ExpenseCell:悬停{
背景颜色：淡蓝色；
边框颜色：黄色；
颜色：黄色；
}
.费用{
背景色：rgb（22167,67）；
}
.disabledMenuItem{
不透明度：0.1；
游标：默认值；
}

@Alexander O'Mara-编辑问题，以遵循最小、完整和可验证的示例suggestions@AlexanderO'Mara-编辑问题，遵循最小、完整和可验证的示例建议