Chrome不显示jQuery或Direct CSS属性设置的类

Question

这看起来有点像设计/ css问题，但我真的需要一些帮助。

这是网页http://library.permilia.com/Gavin/version2.0_beta/lead.html

它适用于除铬想象每一个浏览器。

它的工作原理我的意思是它应用了一个类.error，将边框设置为1px solid＃f00这是一个红色边框。因为某些原因，无论如何你都无法改变它！

有人有什么想法吗？

Answer 1

所以......答案是，你的JS代码都不会触发，因为Chrome正在实现HTML5输入元素，包括表单验证。所以，除非你正确地填写了这些字段，否则你的代码绝不会开火！

在HTML5中，required属性是一个布尔值，它的值为true或false。根据the spec，浏览器应在问题字段上触发invalid事件。如果需要，您可以取消此时的默认阻止行为。但是，如果您尝试使用attr('required')，则脚本会再次崩溃。它会在Chrome中返回true或false，使用HTML5，而不是像您期望的那样的值，如email。

所以，你需要添加这两个作品，如果你想这样的工作：

$(":input").bind("invalid", function(e){ 
    e.preventDefault(); // Don't block the form submit 
}); 

，然后重新因数

var a = $(this).attr('required'); 

你的代码

var a = $(this).attr('required') ? $(this).attr('type') : ""; 

并根据需要更改开关语句以匹配

最后一个念头：你也可以采取一个非常酷的方法（又名特征检测），并做到这一点，而不是：

总结当前的validate:功能与此内侧：

if(typeof $('<input />')[0].checkValidity === "undefined") { 
    ... existing code .. 
} else { 
    $(':input').bind('invalid', function(){ 
    $(this).addClass('error'); 
    }).blur(function(){ 
    // If valid, turn off error 
    // If invalid, turn on error 
    $(this).toggleClass('error', !this.checkValidity()); 
    }); 
} 

Here is a demo的第二个版本，可以在Chrome中使用，也可能是Opera的当前版/测试版。

Answer 2

您的CSS文件是而不是设置“背景颜色”。它设置“* background-color”。这可能是某种如果IE黑客攻击，但你需要设置“真实”的样式属性（“背景颜色”，没有星号）。