Вопрос: загрузочная сетка бутстрапа: вход выходит из контейнера в ie7


Почему в IE7 вход выходит из своего контейнера?

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

enter image description here

<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: Я предполагаю, что это проблема с коробкой и шириной, но есть ли какое-либо решение с загрузкой?


6


источник


Ответы:


это происходит потому, что IE7 не поддерживает свойство css

box-sizing: border-box;

который учитывает заполнение и размер границы как часть ширины элементов.

Узнайте больше об этой недвижимости здесь: http://paulirish.com/2012/box-sizing-border-box-ftw/

из-за этого IE7 добавляет размер заполнения и границы к ширине ввода - превышающей ширину родителя. Вам нужно будет установить их на 0, чтобы получить элемент, соответствующий размеру родителя, и оставаться в жидкости.

вы можете попробовать добавить элемент оболочки вокруг ввода, а затем установить прописку и границу для обертки. Это будет работать во всех браузерах


7



У меня была аналогичная проблема. Я решил это, заменив

class="span3"

с

class="input-mini" 

Разумеется, вы могли бы использовать малые вкладыши или любые другие. Поскольку вы искали span12 для своих входов, я бы предложил «input-xxlarge»,


0