在Firefox和Linux中工作的CSS不透明度Internet Explorer，但不是Chrome＆amp; Safari（WebKit）

Question

我正在开发的asp.NET页面上有一个奇怪的问题。我在设计时使用“CssClass”属性设置.NET超链接控件的不透明度。不透明度在Firefox＆amp; IE，但不是Chrome＆amp; 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 question，但我再次使用的版本应该没有这个问题。

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

Answer 1

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

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

工作示例：

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

＆＃13;

＆＃13;

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;        
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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