调试在IE9中无法正确显示的弹出窗口

Question

I've asked this in another question where we could not solve it

Filling the top part of this window?

and now I've got the faulty code in a fiddle that we can debug: http://jsfiddle.net/qffh5/6/

In internet explorer 9 the top of the window is not filling all the way. I suspect that CSS is being overridden so I looked in IE with the developer tools but couldn't find what was wrong:

Answer 1

When I pinpoint your issue I noticed that the styles are not correctly inherited. So i have cleaned up your fiddle so that only the "problem" existed.

html

<div id="topBar">
    <span class="pusher TB_nb">
        <h2>Some text</h2>
    </span>
    <span id="close">
       <a href="#todo" onclick="#do something">X</a>
    </span>
</div>

Your CSS

#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}

* Fiddle with only this part: http://jsfiddle.net/qffh5/30/ *

Corrected CSS

#topBar {width:100%; background-color:#EFEFDC; display:inline-block;}
#topBar h2 {float:left}
#close {position:relative; float:right;}​

fiddle can be found here : http://jsfiddle.net/qffh5/28/