bootstrap fluid grid: input breaks out of its container in ie7

Question

Why in IE7 input breaks out of its container?

http://jsfiddle.net/Q8jPM/2/

<div class="row-fluid" style="margin-top:10px;">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6 " style="background:green;">
                        <input type="text" class="span12">
                    </div>
                    <div class="span6" style="background:blue;">
                        <input type="text" class="span12">
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6" style="background:green;">
                        <input type="text" class="span12">
                    </div>
                    <div class="span6" style="background:blue;">
                        <input type="text" class="span12">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

​

UPDATE: I suppose it's box-model and width issue, but is any solution with bootstrap?

Answer 1

this happens because IE7 does not support the css property

box-sizing: border-box;

that considers padding and border size as part of the elements width.

read more about this property here: http://paulirish.com/2012/box-sizing-border-box-ftw/

because of this, IE7 adds the padding and border size to the input width - exceeding the parent width. You will have to set those to 0 in order to get the element fit to the parent size and stay fluid.

you could try adding a wrapper element around the input and then setting the padding and border to the wrapper. This will work in all browsers