0

I'm having an issue in IE both 9 and 8 with my jQuery Uniformed radio buttons and checkboxes.

For some reason it seems they are stacked on top of each other or something.

I have no code to show because there's nothing implemented out of the norm, but you can see an example on on my live sandbox here:

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

If you look at it in IE, int Newsletter section there two blank radio buttons. One of them is already selected but seems to be underneath the blank one in presentation. The same for the Terms checkbox, if you check it, you can see the underlying element get checked because the tip of the checkmark overlaps and is visible to the top right of the box.

I've searched everywhere to try and solve this on my own and I can't find anything. And the github issues portal has like 100 open issues and seems to be pretty much dead, so here I am.

Any help would be greatly appreciated.

Thanks.

-Vince

4

2 に答える 2

0

Tried taking your style and script file, and used the default Uniform setup:

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

Which works fine in IE...

So it seems to be Modernizer breaking it, this is what happend when i added it:

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

So my guess is that you are using the Modernizr HTML5 input tag extension which might break Uniform. Could you try to remove modernizr to test it? :)

If it is, you might want to make a build without the input extension.

于 2012-04-03T22:59:47.140 に答える
0

The code does not work in IE8 well because IE8 (as well as IE9 as far as I know) does not support :after and :before pseudo css classes. But you could achieve desired behavior by adding a css and js files that will be IE specific and will be loaded only in IE browsers and add some extra code.

First simply hide the checkbox from the user, to avoid the checkbox be on top of the uniform span.

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

Once the checkbox is hidden we need to handle it's check/uncheck actions manually and trigger events with other element, for instance:

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

I used simple JS and CSS, but you could use scss or sass to save some typing for css rules as well as CoffeeScript or something to handle JS stuff.

于 2014-05-12T11:42:24.647 に答える