Twitter boootstrap span getting smaller in IE7 and IE8

Problem

My spans are getting thinner in iE7 and IE8. I have not set any width. Why is this happening?

edit with code

<header>
    <div class="row">
        <div class="span12" id="header">
            <a href="${homeUrl}"><img id="logo" alt="Logo" src="${homeUrl}resources/images/logo.png"></a>
        </div>
    </div>
</header>

This for example. I have not done anything with the with these classes

Problem courtesy of: user874774

Solution

Sounds like you have the responsive css file linked. That responsive CSS file uses media queries that don't work in < IE 9, the media queries have a "wider" 1200px design that you would see in more modern browsers but it wouldn't be shown on older browsers such as IE7/IE8 hence why it gets thinner.

TL/DR: expected behaviour if using the responsive bootstrap stuff with older browsers.

Solution courtesy of: Phil

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.