So I have included a Bootstrap carousel in my website and I'm creating my own controls for going to the next slide. When I tried to check if the controls were working in IE9, I found something strange. The clickable area for the control was gone. I checked the default controls if the same thing occurred, and it did. To be more concrete, I made some screenshots.
In Safari, Chrome and IE11, this is what's happening and what is desired:
Here the red area is the area in which the click will trigger the next slide. The left side is my own control, right side is the default glyphicon.
In IE9, this will happen:
Is there a quick fix for this?
@Cellcote Please confirm that you're using Bootstrap v3.3.5.
I just upgraded to Bootstrap v3.3.5 and this issue is still happening.
@Cellcote Please post a JS Bin or JS Fiddle that demonstrates the problem.
Nevermind, confirmed using http://getbootstrap.com/examples/carousel/
A jsfiddle is here
Inspired by the issue linked, i managed to fix this by adding the following css:
This solution works in IE9, but does not work in IE8
You appear to have posted a live example (https://fiddle.jshell.net/DTcHh/9789/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
You'll need to fix these errors and post a revised example before we can proceed further.
(Please note that this is a fully automated comment.)
Relevant docs: https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
We can fix the IE9 part, but calling IE8 a won't fix since the suggested fixes in the linked MDN document for IE8 reference nuking the opacity as the only way. That kind of defeats the point though—if it's invisible, there's literally nothing to click on 😁.