css - 引导流体网格：输入在 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>

​</p>

更新：我想这是盒子模型和宽度问题，但是有引导程序的解决方案吗？

Answer 1

这是因为 IE7 不支持 css 属性

box-sizing: border-box;

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

在此处阅读有关此属性的更多信息：http: //paulirish.com/2012/box-sizing-border-box-ftw/

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

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

Answer 2

我遇到了类似的问题。我通过替换解决了

class="span3"

和

class="input-mini" 

当然，您可以使用 input-small 或任何适合的东西。由于您正在寻找 span12 作为您的输入，我建议您使用“input-xxlarge”