bootstrap fluid grid:输入在ie7中突破其容器

Question

为什么IE7输入会突破其容器？

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>

​

更新:我认为这是盒子模型和宽度问题,但是任何解决方案都有bootstrap？

Answer 1

发生这种情况是因为IE7不支持css属性

box-sizing: border-box;

将填充和边框大小视为元素宽度的一部分.

在这里阅读更多关于这个属性:http://paulirish.com/2012/box-sizing-border-box-ftw/

因此,IE7将填充和边框大小添加到输入宽度 - 超过父宽度.您必须将它们设置为0才能使元素适合父级大小并保持流畅.

您可以尝试在输入周围添加包装元素,然后将填充和边框设置为包装器.这适用于所有浏览器