:active doesn't work in IE11 when containing elements have inline-block or vertical-align applied

HTML & CSS
1

I’m trying to create a href button with a small icon and two lines of text vertically centered. It works fine in Chrome and Firefox, but of course IE has to be the problem child that it usually is.

When I apply display:inline-block and vertical-align:middle to the img and span within the anchor, everything looks fine in IE/Chrome/Firefox. However, in IE11, the :active attribute stops working. When I remove those two properties, the :active attribute works again.

Any ideas? Thanks :smile:

<html>
<head>
<style type="text/css">

.mobile-app-button {
	background-color:#00aeef;
	display:inline-block;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	padding: .2em .4em .2em .4em !important;
	font-size: 1.2em;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.mobile-app-button:hover {
	text-decoration:none !important;
}
.mobile-app-button:active {
	position:relative;
	top:1px;
	left:1px;
}

.mobile-app-button span, .mobile-app-button img {
   vertical-align:middle;
   display:inline-block;
}
   
.mobile-app-button img {
    padding-right:.6em;
}


</style>
</head>
<body>
<a href="#" class="mobile-app-button"><img src="http://i.imgur.com/KYXUn9V.png"><span>This is<br>a button!</span></a>
</body>
</html>
2

Interesting - it appears to actually be working but you can’t be clicking on the image or the span.

Removing those two properties has no effect technically. You just happen to change up the target space so to you it APPEARS t obe working for you. It does not solve your problem.

To show what I mean, try clicking the edge of the blue box (anywhere) and you should see it work no matter what solution you mentioned.

I’ll keep at this - this is very interesting. Hope I can get a solution before I leave work.

3

Interesting. The img and span seemed to be “covering” the anchor.

It looks like I found something. Adding the “pointer-events” property seems to clear the issue.

.mobile-app-button span, .mobile-app-button img { vertical-align:middle; display:inline-block; pointer-events: none; }

4

Yup that’ll work.

5

It’s an old IE bug back to IE8 and possible before. Pointer-events will only work for IE11 (in IE versions) but I guess that’s good enough these days.

If the button is really a button then the button element works out of the box.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.mobile-app-button {
    background-color:#00aeef;
    display:inline-block;
    text-align:center;
    text-decoration:none;
    font-weight:bold;
    padding: .2em .4em .2em .4em !important;
    font-size: 1.2em;
    border:none;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    cursor:pointer;
}
.mobile-app-button:hover {
    text-decoration:none !important;
}
.mobile-app-button:active {
    position:relative;
    top:1px;
    left:1px;
}
.mobile-app-button span, .mobile-app-button img {
    vertical-align:middle;
    display:inline-block;
}
.mobile-app-button img {
    padding-right:.6em;
}
.mobile-app-button{
}


</style>
</head>
<body>
<button class="mobile-app-button"><img src="http://i.imgur.com/KYXUn9V.png"><span>This is<br>
a button!</span></button>
</body>
</html>

Obviously no good if you wanted a link though :slight_smile:

6

Huh…didn’t realize it was an old IE bug. I don’t recall encountering it before.

Unfortunately, yes, I need to get a link out of it.

7

There is a fix that works back to IE9.

.mobile-app-button{position:relative}
.mobile-app-button:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:url(fake.gif) no-repeat -1px -1px;
}

IE9 needs the fake gif (an old ie6 trick) but IE11 doesn’t. The image doesn’t need to exist but you can use a 1px transparent gif to avoid missing images in your server logs.

1 Like
8

Looks like that did the trick. Thanks Paul :slight_smile:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.