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>

Ответ 1

Firefox реализует -moz-box-sizing с дополнительным значением, называемым padding-box (довольно понятно). Я подозреваю, что причина, по которой это свойство находилась в "префиксном аду", - если вы хотите, - это то, что значение padding-box, введенное Mozilla, недавно было добавлено в spec без каких-либо других реализаций, и он может быть удален из спецификации, если другие реализации по-прежнему не имеют поверхности или во время 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.

Ответ 2

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

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

Ответ 3

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

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

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

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