Javascript jQuery fadeIn和fadeOut与IE8不兼容
我写这个脚本是为了淡入/淡出一个错误容器。它在FF和Chrome中工作良好,但在IE8中根本不起作用 你可以在这里玩小提琴: 或查看以下代码: 以下是容器CSS:Javascript jQuery fadeIn和fadeOut与IE8不兼容,javascript,jquery,html,css,internet-explorer-8,Javascript,Jquery,Html,Css,Internet Explorer 8,我写这个脚本是为了淡入/淡出一个错误容器。它在FF和Chrome中工作良好,但在IE8中根本不起作用 你可以在这里玩小提琴: 或查看以下代码: 以下是容器CSS: .error-box { filter:inherit; width: auto; display: inline; padding: 5px; border-radius: 5px; -webki-border-radius: 5px; -moz-border-radius:
.error-box
{
filter:inherit;
width: auto;
display: inline;
padding: 5px;
border-radius: 5px;
-webki-border-radius: 5px;
-moz-border-radius: 5px;
direction: rtl;
text-align: right;
background-color: #C00;
color: white;
font-size: 13px;
width: 200px;
float: left;
margin-bottom: 5px;
opacity:inherit;
filter:inherit;
}
以下是HTML DOM:
<label class="form-label">Email</label><br />
<div class="form-field-holder">
<input id='email' type="text" name="email" class="form-input" />
<div class="error-box"><!-- jQuery --></div><br />
</div>
论jQuery的兼容性
jQuery2.x只适用于InternetExplorer9及更高版本。如果您希望在InternetExplorer8中支持淡入淡出元素(最多支持6个),则需要使用jQuery1.x,它仍然支持旧的IE筛选器属性
我已经确认,切换到jQuery1.x可以解决这个问题。没有其他必要,即使在过去似乎需要额外的解决办法
关于控制台和旧的Internet Explorer
需要记住的另一件事是,byconsole
最初并不存在于IE8中。因此,任何调用console.log
的尝试都会导致问题。如果要使用它,请先预先检查控制台的可用性。您可以使用&&
来完成此操作,尽管这是:
或者,您可以选择更详细的路线,并使其成为适当的条件:
if ( window.console ) { console.log( email_regexp.test( email.val() ) ); }
如果您不想在代码中乱扔控制台检查,只需定义自己的:
if ( !window.console ) {
// When debug is true, console.log alerts
var debug = true;
window.console = {
log: function ( message ) {
if ( debug ) alert( message );
}
};
}
进一步阅读:摘自
摘自Omeriko:
“显然有一个解决办法
只需将绝对/相对定位元素设置为以下css属性:
opacity:inherit;
filter:inherit;
例如:
玩得开心
Omer'您需要为IE创建手动淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。
那么它将完美地工作
关于如何操作的好教程:
在IE8中,FadeIn和FadeOut似乎没有得到很好的支持。尽管它在IE的其他更高版本上可以正常工作。jQuery+not compatible=jQuery 2.x;对于较旧的浏览器,请返回1.x
if ( !window.console ) {
// When debug is true, console.log alerts
var debug = true;
window.console = {
log: function ( message ) {
if ( debug ) alert( message );
}
};
}
opacity:inherit;
filter:inherit;
<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>