CSS 不透明度适用于 Firefox 和 Internet Explorer，但不适用于 Chrome 和 Safari (WebKit)

Question

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

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

铬：49
Internet Explorer：11
火狐：44.0.2
野生动物园：5.1.7

工作 sn-p：

body {
    color: white;
}

.menuContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuTable {
    table-layout: fixed;
    width: 300px;
    height: 300px;
    border-spacing: 40px;
}

.expensesCell {
    height: 300px;
    width: 300px;
    text-align: center;
    border: 5px solid white;
    background-clip: padding-box;
    border-radius: 20px;
    font-weight: bold;
    font-size: 2.5em;
    vertical-align: middle;
    overflow: hidden;
}

.menuLink {
    color: white;
    text-decoration: none;
    margin: -10em;
    padding: 10em;
}

.expensesCell:hover {
    background-color: lightsteelblue;
    border-color: yellow;
    color: yellow;
}

.expensesCell {
    background-color: rgb(22,167,67);
}

.disabledMenuItem {
    opacity: 0.1;
    cursor: default;        
}

<div class="menuContent">
    <table class="menuTable">
        <tr>
            <td class="expensesCell">
                <a id="HyperLinkExpenses" href="staff/Expenses.aspx" class="disabledMenuItem menuLink">
                    <div>Expenses</div>
                </a>
            </td>
        </tr>
    </table>
</div>

不透明度未生效的链接（Safari）：

在哪里有想要的结果（Firefox）：

我对浏览器如何处理 CSS 进行了大量研究，但据我所知，不透明度应该适用于我正在测试的所有浏览器版本。关于 Chrome 中的不透明度值，我遇到了这个 stackoverflow question，但同样，我使用的版本不应该有这个问题。

谁能告诉我这是什么问题？

Answer 1

这是 Safari 等 WebKit 浏览器以及 Chrome 和 Opera 等 WebKit 衍生的 Blink 浏览器中长期存在的错误。基本上，不透明度通常不适用于像display: inline 元素这样的内联显示状态（这是a 标签的默认设置）。

解决此问题的最常见方法是将显示状态更改为display: block 或display: inline-block。

工作示例：

将display: inline-block 添加到.menuLink。

body {
    color: white;
}

.menuContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuTable {
    table-layout: fixed;
    width: 300px;
    height: 300px;
    border-spacing: 40px;
}

.expensesCell {
    height: 300px;
    width: 300px;
    text-align: center;
    border: 5px solid white;
    background-clip: padding-box;
    border-radius: 20px;
    font-weight: bold;
    font-size: 2.5em;
    vertical-align: middle;
    overflow: hidden;
}

.menuLink {
    color: white;
    text-decoration: none;
    margin: -10em;
    padding: 10em;
    display: inline-block;
}

.expensesCell:hover {
    background-color: lightsteelblue;
    border-color: yellow;
    color: yellow;
}

.expensesCell {
    background-color: rgb(22,167,67);
}

.disabledMenuItem {
    opacity: 0.1;
    cursor: default;        
}

<div class="menuContent">
    <table class="menuTable">
        <tr>
            <td class="expensesCell">
                <a id="HyperLinkExpenses" href="staff/Expenses.aspx" class="disabledMenuItem menuLink">
                    <div>Expenses</div>
                </a>
            </td>
        </tr>
    </table>
</div>

另外，使opacity 作用于元素的另一种方法是添加除relative 和static 以外的定位，例如position: absolute 或position: fixed，但这还有其他副作用可能不适合您的样品。