The strange case of IE9 un-clickable button
Today I’m working on with IE9 & IE10 bugs.
I noticed that some buttons were not clickable in IE9, but they were in IE10.
Looking around in the HTML I also noticed that the markup was correct. While hovering my mouse cursor over the buttons, I saw the cursor change from default, to pointer and back to default in a quick flicker.
Turns out the button is in fact clickable, but just at a 1 pixel border just at the very end of the buttons. I do not know why this problem occurred in the first place, but I can share how I fixed the problem.
The button was nothing special, just a normal button with some classes.
<button class="some classes" ng-click="someFunction"></button>
This button did not work for some reason (Also, I’ve hidden all project-specific code, the result would be the same though). Keep in mind that it works in IE10, Chrome and Firefox.
The fix was very easy:
<button style="font-size: 40px" class="some classes" ng-click="someFunction"> </button>
Adding a space, and also increasing the font-size of the element created a clickable area in the button. This area is as big as the font-size, so for a bigger/smaller click area one would use a bigger/smaller font-size.
Anyone have any idea why IE9 reacts in such a way?
Could it have something to do with Angular 1.4?
How come the button was not clickable, but when it had content it was?
Reply in the comments below!