box-sizing: проблема с размером рамки в Firefox

Я столкнулся со странной проблемой при тестировании сайта в FF.

Ситуация такова:

  • box-sizing: border-box применяется ко всему.
  • У меня есть плавающая оболочка <div> с фиксированной высотой.
  • Внутри обертки находится <img> с height: 100%.

Когда я добавляю отступ к обертке, я ожидаю, что обертка останется той же высоты, а изображение останется с тем же соотношением сторон, но уменьшится, чтобы соответствовать высоте минус отступ. Ширина оболочки должна измениться, чтобы соответствовать новой ширине изображения плюс отступы.

Это ведет себя так, как ожидалось, в Chrome и IE как на OSX, так и на Win7, но в FF ширина оболочки, кажется, остается такой же, как если бы не было добавлено никакого заполнения.

Я что-то упустил, или это ошибка в реализации box-sizing в Firefox?

Эта скрипка демонстрирует проблему:

http://jsfiddle.net/3j43Y/1/

Скриншоты:

введите здесь описание изображенияРезультат в Chrome

Первое изображение — результат в Firefox, второе — в Chrome.


html css firefox border-box
person kobber    schedule 27.05.2014    source источник
comment
попробуйте это jsfiddle.net/3j43Y/2   -  person Rohit Azad Malik    schedule 27.05.2014

Ответы (3)


arrow_upward
4
arrow_downward

Это похоже на ошибку, но она не вычисляет ширину, как если бы отступы не применялись. Он вычисляет ширину так, как если бы содержимое (тег <img>) имело такую ​​же ширину, как если бы отступы не применялись. Затем он добавляет отступы поверх этой неправильно рассчитанной ширины содержимого.

то есть без отступов элемент <img> имеет ширину 167 пикселей. Если вы затем добавите отступ, он должен уменьшиться (из-за ограничения по высоте), а ширина .wrapper теперь должна быть равна ширине уменьшенной ширины <img> плюс отступ. Вместо этого (по крайней мере, в FF) ширина .wrapper равна ширине не сжатой ширины <img> плюс отступ (167 + 16).

По крайней мере, это то, что я вижу.

Кроме того, похоже, вы можете увидеть то же самое в Chrome (35.0.1916.114), если вы включите или выключите правило padding в инструментах разработчика. Первоначально Chrome понимает это правильно, но затем вы видите такое же ошибочное поведение после переключения padding.

person Ben Jackson    schedule 27.05.2014
comment
Чувак, я только что наткнулся на эту ошибку. Это все еще вокруг спустя годы. bugzilla.mozilla.org/show_bug.cgi?id=930218 - person Domino; 01.12.2015

arrow_upward
1
arrow_downward

Ответ @BYossarian правильный. Ответ ниже является возможным обходным путем при возникновении проблемы.

Поскольку для .wrapper задана определенная высота, мы можем добавить отступы к изображению и получить желаемый эффект.

Демонстрация:

<style type="text/css">
* {
   -moz-box-sizing: border-box;    
   box-sizing: border-box;    
}

.wrapper {
   float: left;
   height: 100px;
   background: #99ccff;
}

.wrapper img {
   height: 100%;
   padding: 8px;
}
</style>

<div class="wrapper">
   <img src="http://placehold.it/250x150" alt="">
</div>

person Bryan Willis    schedule 01.12.2015

arrow_upward
0
arrow_downward

Другой способ анализа, также необходимо быть осторожным с утверждением типа документа.

Если у вас старый тип документа, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Firefox не будет рассматривать box-sizing: border-box;

Для html 5 необходимо объявить тип документа следующим образом: <!doctype html> он исправит Firefox, он правильно возьмет box-sizing.

person Yohan M    schedule 04.02.2019