jQuery 高级选择器在 Internet Explorer 8 中失败
Posted
技术标签:
【中文标题】jQuery 高级选择器在 Internet Explorer 8 中失败【英文标题】：jQuery advanced selector fails in Internet Explorer 8 【发布时间】：2011-10-23 09:20:13 【问题描述】：我正在使用一个复杂的选择器，它在 Chrome 和 Firefox 等中运行良好。但在 Internet Explorer 8 中它失败了。我还没有在旧版本中测试过。
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>Title</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'> </script>
<script type='text/javascript'>
$(function()
$('span[style*="left:20px"][style*="width:100%"]').css(color:'red');
$('#first').css(color:'blue');
);
</script>
</head>
<body>
<span id='first' style='left:20px; width:100%;'>Should be red</span>
<span id='second' style='left:30px; width:100%;'>Should be blue</span>
</body>
</html>
只是把它放在上下文中，不，我不能向跨度添加类或 ID，因为跨度不会总是在同一个位置，我需要根据它们的位置调整 CSS（对于其他，无趣的原因，我不能编辑代码来移动它们），我不能使用外部样式。
在 IE 中使这项工作我缺少什么，如果没有，您能否提出解决方法？
这是一个 JSFiddle http://jsfiddle.net/RMzuh/1/
【问题讨论】：
您应该匹配您的小提琴和帖子中的代码。您没有发布相同的 HTML 结构。 在您的示例中，您将第一个文本设置为红色，然后是蓝色，因此“应该是红色”的文本是蓝色的，而“应该是蓝色的”文本是默认的黑色。 【参考方案1】：这里有一个解决方法：
$('span').each(function()
if(this.style.left == "20px" && this.style.width == "100%")
$(this).css(color:'red');
);
小提琴：http://jsfiddle.net/mrchief/RMzuh/16/
另外，请注意 left:20px 将无效，除非您设置 positon:absolute; 或类似的。
【讨论】：
【参考方案2】：你可以使用.filter()代替复杂的选择器
$('span[style]').filter(function()
return this.style.left === "20px" && this.style.width === "100%";
).css(
color: 'red'
);
Updated jsfiddle
在 IE9 和 IE9 兼容性视图中测试（均因原始小提琴而失败）
【讨论】：
【参考方案3】：我个人对与您的工作方式相匹配的风格完全有效感到惊讶。某个地方的一个空间的存在可能会把它扔掉。当我对这些对象的样式属性执行 getAttribute 时，冒号后有一个空格，实际上，如果您在冒号后的匹配字符串中放置一个空格，您的技术就开始在 IE9 上运行。这意味着，您的技术是特定于浏览器的。是时候找到更好的方法来解决这个问题了。
我建议您采用像 Mrchief 建议的更明确的解决方法。
您可以在this fiddle 中看到，它在 IE9 中有效，而以前的无效，但新的在 Chrome 中无效 - 因此确认您需要一种不同的方式。
【讨论】：
【参考方案4】：您不能依赖样式属性的内容与您用来设置它的字符串完全相同。 Internet Explorer 将样式标准化为 left: 20px; width: 100%;，因此额外的空格使 jQuery 选择器无法正常工作。
如果您在 style 属性和选择器中的冒号后使用空格，它可以在 Internet Explorer、Firefox、Chrome 和 Opera（演示：http://jsfiddle.net/psfWN/1/）中使用，但我不能说什么任何其他浏览器，您很可能会在某些浏览器中发现不同的行为。您根本不能依靠特定方式的样式格式，所以如果它是一个重要的功能，您应该找到不同的方法。
【讨论】：
以上是关于jQuery 高级选择器在 Internet Explorer 8 中失败的主要内容，如果未能解决你的问题，请参考以下文章
jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用
频谱颜色选择器在 Internet Explorer 中不起作用
:visible 选择器在 Internet Explorer 中不起作用