Material: md-checkbox requires css reset for IE11

[langdonx]

If you use md-checkbox inside of a TABLE that specifies border-collapse or border-spacing (maybe others as well), the check doesn't show correctly in IE11.

Issue: http://jsfiddle.net/langdonx/0x4zz9cj/

Fix: http://jsfiddle.net/langdonx/0x4zz9cj/1/

md-checkbox {
    border-collapse: separate;
    border-spacing: 0;
}

[nascosto]

Just ran into this issue myself. Glad the fix is easy.

[topherfangio]

Postponing until RC6 so we can better test. Initial tests look good, though.

[sjlynch]

This is still an issue in 1.1.0-rc.5-master-7f01138. The OP's solution worked for me.

[dhedey]

Just to add, on top of the above issue, I also had occasional issues with the check-mark not displaying properly in IE11 (possibly as a result of clashing with some on styling). The following helped to fix the problem in my case:

md-checkbox.md-checked .md-icon:after, md-checkbox.md-indeterminate .md-icon:after {
    display: inline-block; // Override display: table which breaks the check-mark in IE. This seems to work fine in FF and Chrome also
}

[jesusmariocalleja]

I have a different problem in IE 11. When I click the md-checkbox, it disappears (it's still there, but not visible). But if I select it with the cursor (like selecting text) it appears again. My material version is v1.1.0-rc.5

Thanks!

[topherfangio]

@jesusmariocalleja I'm not seeing this on our latest demos which is version 1.1.1. If you can reproduce this on the latest version, can you please open a separate issue?

[jesusmariocalleja]

@topherfangio I detected the problem was that I had a css style that made the md-checkbox displayed as inline. I changed it to display: inline-block and the problem was solved. I don't know why display: inline worked in Chrome, Firefox, etc but IE.

Thanks!

[topherfangio]

@jesusmariocalleja Awesome; thanks for the update!