我在开发的 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 中的不透明度值,但同样,我使用的版本应该没有这个问题。
谁能告诉我这是什么问题?
最佳答案
这是 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
,但这有其他副作用,可能不适合您的样本。
关于html - CSS 不透明度在 Firefox 和 Internet Explorer 中有效,但在 Chrome 和 Safari (WebKit) 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22144892/