Div with nested block-level elements loses styling in IE7

I'm building a site using the 960gs and some styling of my own. My navigation menu uses this code:

<nav class="push_1">
                        <div class="grid_2 alpha"><span>About</span><a href="#" title="About"></a></div>
                    <div class="grid_2"><span>Services</span><a href="#" title="Services"></a></div>
                    <div class="grid_2"><span>Projects</span><a href="#" title="Projects"></a></div>
                    <div class="grid_2"><span>Client Stories</span><a href="#" title="Client Stories"></a></div>
                    <div class="grid_2"><span>Contact</span><a href="#" title="Contact"></a></div>
            </nav>

And this CSS:

.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden}
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block }
.interior nav div{height:50px}
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9}
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5}

Which works fine in Firefox, but fails miserably in IE7, where only the text within the <span> elements appears and all other styling is lost. I've run into this same issue when trying to use <li> items instead of divs as well. Curiously, the same code shows no problems in IE7 when the height of nav div is set to 50px, as it is on开发者_开发技巧 pages with class="interior set on the body. The HTML5 shim is in effect on this page. I've tried searching through various known IE7 bugs, but couldn't find one that quite matched the problem I'm having. If anyone has any suggestions, I'd be much obliged.

In IE8, I could replicate the issue. What I found was that is was the tags that were confusing it. If I changed those to and added "nav" as a class on those divs and then changed "nav" to ".nav" in the CSS, IE seems to be happy. You can see it in action here in this jsFiddle:

http://jsfiddle.net/jfriend00/Vz85f/

If you still want the tags in for other reasons, it appears that you can wrap the HTML in the fiddle with before and afterwards and it will still display appropriately in IE - just don't use nav in the CSS rules. I'm unsure why - just reporting what I found with experimentation.