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

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

11 голосов
/ 29 апреля 2011

Мне очень нравится CSS-свойство box-sizing.В 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 ]

23 голосов
/ 29 апреля 2011

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 .

3 голосов
/ 01 августа 2013

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

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

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

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

3 голосов
/ 29 апреля 2011

Согласно 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;
...