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

Question

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

我使用的浏览器版本：

Chrome：49
Internet Explorer：11
Firefox：44.0.2
Safari：5.1.7

工作片段：

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 问题，但同样，我使用的版本不应该有这个问题。

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

Answer 1

这是 WebKit 浏览器（如 Safari）和 WebKit 衍生的 Blink 浏览器（如 Chrome 和 Opera）中的一个长期存在的错误。基本上，不透明度通常不适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在元素上工作的方法是添加除relativeand之外的定位static，例如position: absoluteor position: fixed，但这有其他副作用，可能对您的样本不理想。