Odd IE8 behavior

by Brenton Strine

HTML

<h4>IE8 Only:</h4>
<div class="box">
<input type="text" value="y" class="code">
<input type="text" value="b" class="desc">
</div>
<ul>
<li>Click in the yellow and tab to the blue. The blue hides the yellow.</li>
<li>Tab back with <kbd>Shift</kbd> + <kbd>Tab</kbd>: it reappears. </li>
<li>Putting a scrollbar in reveals that this is caused by IE8 scrolling the element.<br>
<div class="box look">
    <input type="text" value="y" class="code">
    <input type="text" value="b" class="desc">
</div>
</li>
</ul>

CSS

.box  input {    
    width: 100%;
    position: absolute;
}
.box input.code {
    width: 70px;
    background: yellow;
}
.box input.desc {
    left: 70px;
    background: lightblue;
}
.box { 
    width: 300px; 
    overflow:hidden;
    position: relative;
    height: 45px;
}
.look{ 
    overflow-x: auto;
}