CSS不透明度在IE 6 / IE7或IE8中无法在兼容模式下正常工作
题
在以下代码中,带有锚的第一和第二映像具有链接,在这些图像中,字幕文本在IE 6 / IE7或IE8中的页面加载中没有隐藏(不透明度0)。所有其他图像都可以正常工作,但是我需要链接其中。
这是代码 JSFIDDLE
FF工作正常,在正常模式下IE8也很好
我会在这里发布整个代码,但是它很长,而且我很难做到这一点。
添加了JS代码
$(window).load(function(){
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'inline-block');
});
$('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
//$(this).children('.description').show();
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
似乎不是这样...
$(this).css('opacity', 0);
解决方案
它是 Haslayout错误. 。您可以通过添加 zoom: 1
给你 Div. -Wrapper CSS宣言:
div.wrapper{
zoom: 1;
position:relative;
}
使固定 在这里行动.
其他提示
即版本8之前,IE不支持不透明度的官方实施。虽然官方版本是
opacity: [0..1]
IE在第8版之前的实现(因此,IE8的兼容模式,与IE7一样)是
filter: alpha(opacity=[0..100])
尝试至少IE7和8:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
$(this).css(
{
'opacity': 0,
'-ms-filter':"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)",
'filter': 'alpha(opacity=50)'
});
更新已编辑为使用JSBIN的代码
尝试此CSS
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
并添加jQuery的课程
$('div.description').each(function(){
//...set the opacity to 0...
$(this).addClass('transparent')
...
不隶属于 StackOverflow