CSS чи включає ширина прокладки?

146

Здається, що в IE ширина включає розмір оббивки. в той час як у FF, ширина не робить. Як я можу змусити обох поводитись однаково?

Дякую.

css

— Джейк
джерело

Можливо, вам потрібно активувати режим, що відповідає стандартам. Але, не бачачи якогось коду, я не можу дати вам більше жодних вказівок.

— Джефф Хаббард

307

IE використовував більш зручну, але нестандартну модель коробки "border-box" . У цій моделі ширина елемента включає прокладку та бордюри. Наприклад:
#foo { width: 10em; padding: 2em; border: 1em; }
було б 10emшироко.
На відміну від цього, всі веб-переглядачі, які побоюються стандартів, за замовчуванням відповідають моделі вікна "content-box" . У цій моделі ширина елемента не включає прокладки або бордюри. Наприклад:
#foo { width: 10em; padding: 2em; border: 1em; }
насправді буде 16emшироким: 10em+ 2emпрокладка для кожної сторони, + 1emоблямівка для кожного краю.

Якщо ви використовуєте сучасну версію IE з дійсною розміткою , хорошим доктрипом та відповідними заголовками, вона буде відповідати стандарту. В іншому випадку ви можете змусити сучасні браузери, які відповідають стандартам, використовувати "border-box" за допомогою:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Перша декларація потрібна для Opera, друга - для Firefox, третя - для Webkit та Chrome.

Ось простий тест, який я зробив років тому, щоб перевірити, яку декларацію розміру коробки підтримує ваш веб-переглядач: http://phrogz.net/CSS/boxsizing.html

Зауважте, що Webkit (Safari та Chrome) не підтримує padding-boxмодель коробки жодними деклараціями.

— Фрогз
джерело

2

+1 для згадування як вікна вмісту, так і моделей рамки. Можливо, хочете детальніше розібратися у відмінностях.

— BoltClock

1

@BoltClock Дякую за поштовх відповісти більш жорстко. Оновлено.

— Фрогз

Гарна відповідь; Я вже пару днів намагаюся запам'ятати (або знайти) назви різних варіантів ... +1 =)

— Давид каже повернути Моніку

Ніхто не переймається оперою.

— Майкл Дж. Калкінс

3

@whitelettersinblankpapers Подивіться, чому W3Schools смокче, і тоді набагато краща довідка, яка веде вас до стандарту W3C . Не переходьте більше за посиланнями на W3Schools. Крім того, додайте "MDN" до пошукових запитів щодо веб-стандартів у майбутньому.

— Фрогз

27

Просте правило - намагатися уникати використання властивостей padding / margin та width для одного елемента. тобто використовуйте щось подібне до цього

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— шаньхан
джерело

Я використовую цей метод на регулярній основі і ніколи не маю з ним проблем між браузером.

— Кевін Біл

20

Я наткнувся на це питання і, хоча це вже пару років, я подумав, що можу додати це, якщо хтось наткнеться на цю тему.

CSS3 тепер має властивість розміру коробки. Якщо ви встановите, скажіть,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

ваш клас буде шириною 1000 пікселів, а не 1030 пікселів. Це, звичайно, неймовірно корисно для всіх, хто використовує рамки розміру пікселів із рідкими дивами, оскільки це вирішує інакше нерозв'язну проблему.

Ще краще, що розмір коробки підтримується усіма основними браузерами, крім IE7 та нижче. Щоб включити всі елементи в межах розміру ширини або висоти, встановіть розмір коробки для рамки. Щоб об'єднати інші елементи по ширині та / або висоті, що є типовим, ви можете встановити розміри коробки на "вміст коробки".

Я не впевнений у поточному стані синтаксису браузера, але я все ще включаю префікси -moz та -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Мейсон Баржа
джерело

Так, і у Пола Ірландського є приємна стаття в блозі про це тут: paulirish.com/2012/box-sizing-border-box-ftw

— Дейв Бертон

Як ця відповідь має стільки відгуків, коли така ж відповідь, як і прийнята, написана за 3 роки до цього?

— діппас

1

Чи є у вас задекларований вчення Коли я почав кодувати HTML, у мене виникла ця проблема, і це було через те, що не було оголошено доктіпу. Мій улюблений:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
джерело

1

для тих, хто все-таки матиме проблему, jQuery надав два властивості outerWidth ()та innerWitdh ()знати ширину об'єкта з або без меж ...

— Патрік
джерело