Question

好的，所以我的网站上有一个整洁的小登录表单，我喜欢占位符而不是标签！众所周知，微软甚至知道它拥有巨大的资源，拒绝发布完整的CSS3 HTML5兼容浏览器。他们甚至如此贪婪，他们不允许老用户升级到9，除非他们有Windows Vista / 7 ---结束IE咆哮

所以我正在使用我在另一篇文章中读到的假密码字段技巧，但我遇到了问题！当我试图让假密码字段出现并隐藏密码时，似乎IE正在强制元素上的某种虚假内联样式，并且不允许它隐藏！

以下是代码：

//This function hides our fake password field and changes focus to the real one. Yet another IE workaround...
$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
//These functions perform the link hover copycat
$("#titleHover").mouseenter(function(){
    $("#titleLarge").css('background-color', '#555');
});
$("#titleHover").mouseout(function(){
    $("#titleLarge").css('background-color', 'transparent');
});
$("#titleHover").click(function(){
    $("#userMenu").animate({
        height: "192px",
    }, 250, function() {
        // Animation complete. Display form and swap out arrow.
        $('#loginForm').css('visibility', 'visible');
        $("#titleLarge").css('background-color', 'transparent');
        $("#titleHover").unbind('mouseenter').unbind('mouseout');
        //Use my sweep function to swap in values for IE
        $('html').click(function() {
            //Hide the login, animate menu up and swap back in down arrow.
            $('#loginForm').css('visibility', 'hidden');
            $("#userMenu").animate({
                height: "64px",
            }, 250, function() { 
                $("#titleHover").mouseenter(function(){
                    $("#titleLarge").css('background-color', '#333');
                });
                $("#titleHover").mouseout(function(){
                    $("#titleLarge").css('background-color', 'transparent');
                });
            });
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }                       
        });                     
        $('#userWrap').click(function(event){
            event.stopPropagation();
        })
    });
});

IE调试的图像：

enter image description here

到底是什么^^^

Answer 1

您可以使用jQuery清除内联样式。这是一把大锤子，对于这种情况来说可能太大了。

$('.myDiv').attr('style','')

Answer 2

在今晚与Jquery进行了大量的练习后，我通过在脚本中添加更多逻辑来修复我的问题。我遇到的问题与我的脚本如何伪造IE的替代品有关。它将占位符文本分配给值并更改颜色。通过添加相同的逻辑来假装输入和输出，我能够解决问题。在将来，我想我将使用占位符来处理文本！简单逻辑：如果用户尚未聚焦或键入任何内容，则占位符可见。应该在每个浏览器中工作！这些是现在的显示/隐藏功能：

$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
$("#password").focusout(function(){
    if ($('#password').attr('value') == $('#password').attr('placeholder')) {
        $('#password').hide();
        $('#fakepassword').show();
    }
});

IE强制内联样式覆盖我的Jquery魔术？

2 个答案: