IE中的jQuery統一收音機/複選框

我在使用jQuery Uniformed單選按鈕和複選框的IE 9和8中都遇到問題。IE中的jQuery統一收音機/複選框

出於某種原因，它似乎是堆疊在彼此之上或其他東西。

我沒有代碼來顯示，因爲沒有什麼出規範的實現，但你可以在我住的沙箱在這裏看一個例子：

http://sandbox.tsdapps.com/account/register

如果您在IE中看到它，INT通訊部分有兩個空白的單選按鈕。其中之一已經被選中，但似乎在演示文稿中的空白之下。對於條款複選框也是如此，如果您選中它，則可以看到底層元素被檢查，因爲選中標記的頂端重疊並且在框的右上方可見。

我到處搜索試圖解決這個問題，我找不到任何東西。而github的問題門戶網站有100個未解決的問題，似乎已經死了，所以我在這裏。

任何幫助將不勝感激。

謝謝。

-Vince

來源

2012-04-03 Vince Kronlein

嗯你的統一在IE中產生多於一個元素而不是ff/chrome。你使用最新版本？因爲在官方網頁上它會產生與你的不同的HTML（http://uniformjs.com/） – 2012-04-03 22:39:05

是的官方版本和github的最新版本。 – 2012-04-03 22:39:42

試圖把你的風格和腳本文件，並使用默認設置統一：

http://jsfiddle.net/AKfN8/2/

這在IE罰款...

所以它似乎是現代化者打破它，這是什麼發生當我添加它：

http://jsfiddle.net/AKfN8/11/

所以我的猜測是你使用Modernizr HTML5輸入標籤擴展可能會打破統一。你可以嘗試刪除modernizr來測試它嗎？ :)

如果是這樣，您可能需要在沒有輸入擴展名的情況下進行構建。

來源

2012-04-03 22:59:47

嗯。如果我選擇jQuery的1.7.1版本，設置爲onDomReady並進行更新，則會生成每個廣播和複選框的多個實例，在Chrome中帶或不帶moderizr。我會在IE中試用它，但我不確定你看到的是你說的是在工作。 – 2012-04-03 23:15:03

那是因爲你已經在你的'script.combined.js'中有jQuery了 - 我從你的網站上拿過的那個。因此，如果將它包含在JsFiddle中，它也會符號化兩次。 – 2012-04-03 23:19:31

事實上，它竟然不是Modernizr，它是一個佔位符替代插件腳本，導致衝突。我發現了一個新的版本和責備...所有的鬥魚！感謝您的幫助，無論如何，您都指出了我的總體想法。 – 2012-04-04 01:54:40

該代碼在IE8中無法正常工作，因爲IE8（以及IE9據我所知）不支持:after和:before僞css類。但是，您可以通過添加一個css和js文件來實現所需的行爲，這些文件將是IE特定的，並且只會在IE瀏覽器中加載並添加一些額外的代碼。

首先簡單地從用戶處隱藏checkbox，以避免複選框位於統一範圍之上。

#some_holder_dom_node span>input[type='checkbox'] { 
    visibility: hidden; 
}

一旦複選框被隱藏，我們需要處理它的選擇/取消手動操作和觸發事件與其他元素，例如：

(function(){ 
    $(document).on('click', '#some_holder_dom_node div.checker>span', function(){ 
    $(this).find('input:checkbox').trigger('click'); 
    }); 
}());

我用簡單的JS和CSS，但你可以使用scss或sass來保存一些用於css規則的輸入以及CoffeeScript或者某些東西來處理JS的東西。

來源

2014-05-12 11:42:24 Developer

IE中的jQuery統一收音機/複選框

回答

相關問題