Internet Explorer Extension on Inline Block Anchor Hover
I used inline-block
to arrange multiple anchors as tabs in a tab strip that scrolls horizontally on overflow rather than wrap tabs across multiple lines.
This works fine in Chrome and FF on Windows, as well as Chrome / Safari on iPad, but is actually funky on IE 9.
The problem in IE 9 is that when I hover the anchor labels, the psuedo selector that changes that element's BG color and color causes the parent div to increase its height. I am assuming this is an IE 9 bug, but I was unable to verify.
I found a hack fix that involves wrapping the parent in a block element with overflow:hidden
and specific height
, but I want to avoid using a specific height if possible.
Questions
- What is a general fix that doesn't involve IE cracking or specific widths?
- Why does this only happen when the
:hover
psuedo class is used? - Is there a better practice to make the tabs the way I do them (scroll if exceeds width, don't wrap)?
Fiddle problem: http://jsfiddle.net/oyzpxr6m
Hack fix fiddle: http://jsfiddle.net/oyzpxr6m/1/
Sample code:
.tabs {
display: block;
white-space: nowrap;
background-color: blue;
overflow: auto;
}
.tabs a {
display: inline-block;
border: 1px solid #ccc;
color: #fff;
}
.tabs a:hover {
background-color: red;
}
<div class='tabs'>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
<a href='tab'>tab name goes here</a>
</div>
<h3>some content goes here</h3>
source to share
Great bug. This seems to only affect Internet Explorer 9, which is allowed in versions 10 and above. While I don't quite understand what is causing the problem, the problem is, of course, related to the container's height growth .tabs
on each pass over one of its nested elements .tab
.
A straightforward fix that will resolve the issue across all browsers is to simply apply max-height
to the containing element. The specific approach I have taken is below:
.tabs {
overflow: auto;
max-height: 100%;
white-space: nowrap;
background-color: blue;
}
source to share