Firefox 4 игнорирует размеры ящиков?

Мне очень нравится свойство CSS для определения размеров блоков. В Chrome, IE8+ и Opera (не знаю, с какой версии) это поддерживается. Firefox 4, кажется, игнорирует это.

Я знаю, что есть свойство -moz-box-sizing, но нужно ли мне писать его каждый раз, когда я хочу изменить тип размера коробки?

Код

<html>
    <head>
        <style type="text/css">
            .outer{
                width:600px;
                height:100px;
                background-color:#00ff00;
                border:1px solid #000;
            }
            .inner{
                width:100%;
                height:100%;
                background-color:#ff0000;
                border:1px solid #fff;
                box-sizing:border-box;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>
Источник

3 ответа

Решение

Firefox реализует -moz-box-sizing с дополнительным значением под названием padding-box (довольно очевидно). Я подозреваю, что причина, по которой это свойство было в "префиксном аду" - если хотите, - в том, что padding-box Значение, представленное Mozilla, было добавлено в спецификацию только недавно, без других реализаций, и оно может быть удалено из спецификации, если другие реализации все еще не всплывают до или во время CR.

К сожалению, Firefox 4 все еще требует префикса, и продолжал делать это в течение многих лет:

.inner {
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

При этом Firefox наконец-то начал поставки с box-sizing с префиксом версии 29. Я считаю, что экспериментальный padding-box значение по-прежнему поддерживается, но все еще находится под угрозой. Опять же, шансы, которые вам нужно будет использовать padding-box очень низкие, поэтому вам, вероятно, не о чем беспокоиться. border-box это все гнев, и в отличие от padding-box не уйдет в ближайшее время.

Итак, вкратце: если вы не заботитесь ни о чем, кроме последней версии, вам больше не нужен префикс. В противном случае, если у вас уже есть префикс, нет ничего плохого в том, чтобы держать его на некоторое время.

Также см. Документацию по MDN.

Источник

Согласно https://developer.mozilla.org/en/CSS/box-sizing вам нужно использовать -moz-box-sizing, чтобы получить эффект для работы в FireFox. Это довольно распространено для расширений CSS3, большинство поставщиков браузеров используют префикс поставщика, пока не убедятся, что реализация соответствует спецификации. Вам также придется использовать префиксы поставщиков для других основных браузеров. К счастью, вы можете указать полный набор как стандартных, так и специфичных для поставщика свойств, чтобы добиться этого без вредных последствий.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
Источник

Это довольно старая ветка, но она все еще на первой странице результатов Google...

Эти параметры могут быть установлены глобально в сбросе CSS

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

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

Источник
Другие вопросы по тегам