CSS filters - sometimes working, sometimes not?
I'm on the verge of pulling my hair out over this.
Here I have a block of perfectly functioning CSS:
#admin .block.mode.off
{
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
}
Meanwhile... Internet Explorer 8 couldn't care less about my filter declarations here:
#admin .drop .tabs
{
margin-bottom: 12px;
}
#admin .drop .开发者_运维技巧tab
{
margin-right: 4px;
}
#admin .drop .tab.off
{
cursor: pointer;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
#admin .drop .tab.off:hover
{
text-shadow: 0px 0px 4px #fff;
}
#admin .drop .tab.on
{
cursor: default;
text-shadow: 0px 0px 4px #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#fff, strength=4)";
filter: progid:DXImageTransform.Microsoft.Glow(color=#fff, strength=4);
}
My document shows in IE8 Standards, and I am assuming the developer tools are a load of tuna, because the functioning block shows up in its CSS tab as:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25); opacity: 0.25
Does anyone have any ideas?
According to this answer, you should try giving #admin .drop .tab
hasLayout. I usually do this with zoom:1
but it looks like IE8 doesn't let that trigger hasLayout anymore, and we're supposed to use height:1%
(or any height declaration other than auto).
精彩评论