在Firefox和Firefox中使用CSS不透明度Internet Explorer，但不是Chrome& Safari（WebKit） [英] CSS opacity working in Firefox & Internet Explorer, but not Chrome & Safari (WebKit)
问题描述
在我正在开发的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;宽度：300px; height：300px; border-spacing：40px;}。expensesCell {height：300px;宽度：300px; text-align：center;边框：5px纯白色; background-clip：padding-box; border-radius：20px; font-weight：bold; font-size：2.5em; vertical-align：middle; overflow：hidden;}。menuLink {color：white;文字修饰：无;保证金：-10em; padding：10em;}。expensesCell：hover {background-color：lightsteelblue;边框颜色：黄色;颜色：黄色;}。expenseCell {background-color：rgb（22,167,67）;}。disabledMenuItem {opacity：0.1;光标：默认; }
< div class =menuContent> < table class =menuTable> < TR> < td class =expensesCell> < a id =HyperLinkExpenseshref =staff / Expenses.aspxclass =disabledMenuItem menuLink> < DIV>费用< / DIV> < / A> < / TD> < / TR> < / table>< / div>
没有生效（Safari）：
（Firefox）：
我做了一个很多关于浏览器如何处理CSS的研究，但是从我看到的不透明度应该适用于我测试的所有浏览器版本。我遇到了这个 stackoverflow问题，关于Chrome中的不透明度值，但再次，我使用的版本不应该有这个问题。
任何人都可以告诉我问题在这里吗？
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;宽度：300px; height：300px; border-spacing：40px;}。expensesCell {height：300px;宽度：300px; text-align：center;边框：5px纯白色; background-clip：padding-box; border-radius：20px; font-weight：bold; font-size：2.5em; vertical-align：middle; overflow：hidden;}。menuLink {color：white;文字修饰：无;保证金：-10em;填充：10em; display：inline-block;}。expenseCell：hover {background-color：lightsteelblue;边框颜色：黄色;颜色：黄色;}。expenseCell {background-color：rgb（22,167,67）;}。disabledMenuItem {opacity：0.1;光标：默认; }
< div class =menuContent> < table class =menuTable> < TR> < td class =expensesCell> < a id =HyperLinkExpenseshref =staff / Expenses.aspxclass =disabledMenuItem menuLink> < DIV>费用< / DIV> < / A> < / TD> < / TR> < / table>< / div>
使元素变为 opacity 的方法是添加除 relative 和之外的其他位置。 static ，比如 position：absolute 或 position：fixed 这些效果可能不适合您的样品。
I have a strange issue on an asp.NET page I am developing. I set the opacity of a .NET hyperlink control using the "CssClass" property at design-time. The opacity takes effect in Firefox & IE, but not Chrome & Safari.
Browser versions I am using:
Chrome: 49
Internet Explorer: 11
Firefox: 44.0.2
Safari: 5.1.7
Working snippet:
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 where opacity has not taken effect (Safari):
And where it has the desired result (Firefox):
I did a lot of research on how the browsers handle CSS, but from what I've seen the opacity should work on all of the browser versions I am testing on. I came across this stackoverflow question in regards to the opacity value in Chrome but again, the version I am using should not have this problem.
Can anyone tell me what the issue is here?
This is a long-standing bug in WebKit browsers like Safari, and WebKit-derived Blink browsers like Chrome and Opera. Basically, opacity does not normally work on inline display states like display: inline elements (which is the default for a tags).
The most-common way to work around this is to change the display state to something like, display: block or display: inline-block.
Working example:
Adds display: inline-block to .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>
Alternately, another way to make it opacity work on the element would be to add positioning other than relative and static, like position: absolute or position: fixed, but this has other side-effects which are probably not ideal for your sample.
这篇关于在Firefox和Firefox中使用CSS不透明度Internet Explorer，但不是Chrome& Safari（WebKit）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
