html - CSS 不透明度在 Firefox 和 Internet Explorer 中有效，但在 Chrome 和 Safari (WebKit) 中无效

Question

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

我使用的浏览器版本:

Chrome :49
互联网浏览器:11
火狐浏览器: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 进行了大量研究，但据我所知，不透明度应该适用于我正在测试的所有浏览器版本。我遇到了这个 stackoverflow question关于 Chrome 中的不透明度值，但同样，我使用的版本应该没有这个问题。

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

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，但这有其他副作用，可能不适合您的示例。