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

Question

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

我使用的浏览器版本：

Chrome: 49
Internet Explorer：11
火狐浏览器：44.0.2
野生动物园：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>

Link 其中不透明度未生效 (Safari)：

并在其中获得所需的结果 (Firefox)：

我对浏览器如何处理 CSS 做了很多研究，但据我所知，不透明度应该适用于我正在测试的所有浏览器版本。关于 Chrome 中的不透明度值，我遇到了这个 Whosebug 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，但这还有其他副作用，可能不适合您的样本。

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

CSS opacity working in Firefox & Internet Explorer, but not Chrome & Safari (WebKit)

html

css

webkit

google-chrome

工作示例：