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">&nbsp;</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!

Please follow and like me:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>