css3pie弄亂了DOM，結果在jQuery選擇錯誤

Question

爲了得到IE 6/7/8 CSS3效果（邊界半徑，箱陰影......），我使用css3pie。

但是，css3pie在DOM中生成一些css3-container (v1)/css3pie (v2)標記，這會使預期的體系結構出現混亂。這裏有一個例子：

CSS

pre { 
    border: 1px solid #aaa; 
    border-radius: 5px; 
    behavior: url(pie.htc); 
} 

HTML

<div class="foo">bar</div> 
<p class="getme">paragraph</p> 
<pre>preformatted</pre> 

jQuery的

// undefined  expected: getme 
alert($("pre").prev().attr("class")); 

// css3-container expected: p 
alert($("pre").prev()[0].tagName); 

// getme   expected: foo 
alert($("pre").prev().prev().attr("class")); 

// 4    expected: 3 
alert($("body").children().size()); 

// will not set  expected: Impact 
$("p+pre").css({fontFamily: "Impact"}); 

// it almost affects all such jQuery selctors 

實際根兒如下：

<DIV class="foo">bar</DIV> 
<P class="paragraph">paragraph</P> 
<css3-container...> 
    <border...> 
     <shape...><stroke></stroke><stroke></stroke></shape> 
    </border> 
</css3-container> 
<PRE>preformatted</PRE> 

有沒有人遇到過這種問題？任何解決方法？有沒有替代css3pie讓CSS3在IE 6/7/8上工作？

Answer 1

我也嘗試過使用CSS3PIE，並面臨類似的問題（主要與jQuery和媒體查詢）。事實上，我找不到任何簡單/實用的解決方案。

我的建議是使用Modernizr's load逐步增強舊版IE的用戶體驗。它需要更難/更長的過程，因爲您必須爲每個CSS3功能設置單個polyfill。由於mario.tco已經告訴你，Modernizr的回購有list of cross-browser polyfills。這裏有一個feature detection片段的列表。

也看看html5please和caniuse。

關於IE6和7，除非您的網站統計信息指出不同的東西，否則使用率爲below 1% on average（有些例外，請檢查ie6countdown），因此您幾乎可以忽略它們。但是，對於conditional comments，您可以針對每個具有特定回退的IE版本。

請記住，您並不需要在IE <上使用盒子陰影和其他視覺裝飾（除非它們是可用性所必需的）。事實上，任何回退都可能導致巨大的性能問題（想想IE7用戶可以擁有哪些硬件）。 Websites don't need to look exactly the same in any browser。

Answer 2

而不是僅僅使用原始prev()添加CSS選擇器，它縮小搜索

$("pre").prevUntil('p').attr("class"); 
// OR 
$("pre").prevUntil('.paragraph').attr("class"); 

如果你打算使用CSS3「黑客」以6/7/8正確的行爲使IE當走DOM時，不要試圖依賴預期的DOM結構，試圖更具體。

編輯

改爲prevUntil()的prev()函數調用

Answer 3

CSS3PIE是模擬CSS3圓角一個非常有用和強大的方式 - 在我的公司這是我們選擇的一個，但有有很多其他的方式來做到這一點。

CSS3PIE創建圓角的方式會創建<css3-container>標記，作爲具有behavior屬性的元素的前一個兄弟元素，因此它將更改DOM結構並打破prev()調用。 CSS容器非常重要，因爲它是<pre>標籤後面的圓角背景的VML圖。你可以這樣做

一種方法是來包裝你<pre>標籤別的東西像<div>，然後使用<div>使用prev()功能導航DOM。

你可以做到這一點的另一種方式是創建這樣

/* This adds a plugin prevPie and nextPie - it is the same as the 
    existing prev and next, but it will ignore css3-containers. */ 
(function($){ 
    function addPlugin(name) { 
     $.fn[name + 'Pie'] = function() { 
      var result = []; 
      this[name]().each(function(i,el){ 
       if (el.tagName == 'css3-container') { 
        var val = $(el)[name]()[0]; 
        val && result.push(val); 
       } else { 
        result.push(el); 
       } 
      }); 
      return $(result); 
     } 
    } 
    addPlugin('prev'); 
    addPlugin('next'); 
})(jQuery); 

一個jQuery插件，現在下面的工作應該像你希望它在所有瀏覽器。

// undefined  expected: getme 
alert($("pre").prevPie().attr("class")); 
// css3-container expected: p 
alert($("pre").prevPie()[0].tagName); 

// getme   expected: foo 
alert($("pre").prevPie().prevPie().attr("class")); 
// P    expected: div 
alert($("pre").prevPie().prevPie()[0].tagName)); 

Answer 4

這可能不是你要找的答案，但不是試圖讓jQuery的忽視PIE的注入元素，我建議（重新）編寫的jQuery使用類/ IDS越來越少依賴在頁面結構上。這有利於使您的代碼更適應其他頁面結構更改，並使代碼更具可移植性和可重用性。

當你必須遍歷DOM，大部分（如果不是全部）jQuery's traversal methods包括過濾器，選擇參數，你可以用它來排除PIE的元素，例如：

$("pre").prevUntil('*', 'not(css3-container)') 

$("body").children('not(css3-container)') 

Answer 5

你有沒有嘗試過這樣的：

http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/

這裏是polyfills的列表，你可以使用其他功能：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills