I have an unordered list. The list items are inline-block. I can't and won't use float:left because I need to align them to the bottom vertically. Everything's fine. The whole layout works across every browser except IE7 which seems to apply the whitespace:nowrap; property on the ul in IE Inspector but doesn't really apply it. The list items still get stacked when browser's width is small.
div#container {
display: inline-block;
*display: inline;
zoom: 1;
}
div#container > ul {
white-space:nowrap;
}
div#container > ul > li {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: bottom;
}
Can't post a fiddle. Because jsFiddle itself doesn't work on IE7.
IE7 must be running in a standards compliant mode in order for CSS combinators to work properly.
You can run
alert(document.compatMode);to see which mode you are running in. If you receiveBackCompatthen you are running in Quirks Mode and CSS combinators will not work. If you receiveCSS1Compat, then IE7 is running in a standards mode and CSS combinators will work.The easiest solution is to simply remove the combinators from your CSS:
If you cannot remove the combinators, then you will need to use a doctype to make IE7 adopt a standards compliant mode. In my tests, adding
<!DOCTYPE html>to the top of the document worked fine in IE7.