Internet Explorer 8中的jQuery高級選擇器失敗

我正在使用一個複雜的選擇器，它在Chrome和Firefox等工作正常。但在Internet Explorer 8中卻失敗了。我還沒有在舊版本中測試過它。Internet Explorer 8中的jQuery高級選擇器失敗

<!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/

來源

2011-08-09 Kirk

你應該匹配代碼形式你的小提琴和在帖子中。您沒有發佈相同的HTML結構。 –

你走了，謝謝。 – Kirk

在您的示例中，您將第一個文本設置爲紅色，然後是藍色，所以「應該是紅色」的文本是藍色，並且「應該是藍色」的文本是默認的黑色。 – Guffa

這裏有一個解決方法：

$('span').each(function() { 
    if(this.style.left == "20px" && this.style.width == "100%") { 
     $(this).css({color:'red'}); 
    } 
});

小提琴：http://jsfiddle.net/mrchief/RMzuh/16/

而且，請注意，除非你設置positon:absolute;或類似left:20px不會有任何效果。

來源

2011-08-09 16:29:26 Mrchief

取而代之的是複雜的選擇，你可以使用.filter()

$('span[style]').filter(function() { 
    return this.style.left === "20px" && this.style.width === "100%"; 
}).css({ 
    color: 'red' 
});

Updated jsfiddle

在IE9和IE9的兼容性視圖測試（均失敗，原來的小提琴）

來源

2011-08-09 16:32:02

我個人感到驚訝的是，這種風格與你所做的工作方式相匹配。某處存在一個空間可能會導致它失效。當我在這些對象的style屬性上獲取屬性時，冒號後面有一個空格，事實上，如果在冒號後面的匹配字符串中放置空格，則您的技術將開始在IE9上工作。這意味着，您的技術是瀏覽器特定的。有更好的方法來解決這個問題。

我建議你帶一個像Mrchief建議的更加明確的解決方法。

您可以在this fiddle中看到它可以在IE9中運行，而前一個不會在Chrome中運行，因此確認您需要不同的方式。

來源

2011-08-09 16:37:24 jfriend00

您不能依賴style屬性的內容來完全像用來設置它的字符串。 Internet Explorer將這種風格標準化爲left: 20px; width: 100%;，所以額外的空格使jQuery選擇器不起作用。

如果在style屬性和選擇器中使用冒號後面的空格，它可以在Internet Explorer，Firefox，Chrome和Opera（演示：http://jsfiddle.net/psfWN/1/）中使用，但我無法對任何其他瀏覽器，而且很有可能你會在某些瀏覽器中發現不同的行爲。你不能依賴於特定格式的樣式，所以如果它是一個重要的功能，你應該找到一種不同的方法。

來源

2011-08-09 16:41:34 Guffa

Internet Explorer 8中的jQuery高級選擇器失敗

回答

相關問題