объекта с или без границ ...

ся, что в IE ширина включает размер отступа. в то время как в FF ширина не имеет. Как я могу заставить обоих вести себя одинаково?

Благодарю.

 Jeff Hubbard15 янв. 2011 г., 05:54
Возможно, вам нужно активировать режим, соответствующий стандартам. Однако, не видя некоторого кода, я не могу дать вам больше рекомендаций, чем это.

Ответы на вопрос(5)

Решение Вопроса

«Граница-бокс» модель коробки. В этой модели ширина элемента включает отступы и границы. Например:
#foo { width: 10em; padding: 2em; border: 1em; }
было бы10em широкий.

Напротив, все браузеры, опасающиеся стандартов, по умолчанию«Содержание ящика» модель коробки. В этой модели ширина элементане включают отступы или границы. Например:
#foo { width: 10em; padding: 2em; border: 1em; }
будет на самом деле16em широкий:10em + 2em прокладка для каждой стороны, +1em граница для каждого края.

Если вы используете современную версию IE сдействительная разметка,хороший доктайп, а такжесоответствующие заголовки это будет придерживаться стандарта. В противном случае вы можете заставить современные совместимые со стандартами браузеры использовать «границы» через:

* {
  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 блочная модель через любую декларацию.

 BoltClock♦15 янв. 2011 г., 06:30
+1 за упоминание моделей контента и рамок. Хотелось бы подробнее остановиться на различиях.
 Phrogz21 июн. 2015 г., 17:00
@whitelettersinblankpapers Смотритепочему W3Schools отстой а потомгораздо лучшая ссылка что приводит вас кстандарт W3C, Не переходите по ссылкам на W3Schools. Кроме того, добавьте «MDN» в свою поисковую систему запросы о веб-стандартах в будущем.
 Phrogz15 янв. 2011 г., 16:00
@BoltClock Спасибо за побуждение отвечать более строго. Обновлено.
 BoltClock♦16 янв. 2011 г., 00:29
Оу, теперь я хотел бы добавить второй голос :)
 David Thomas15 янв. 2011 г., 16:04
Хороший ответ; Я уже несколько дней пытаюсь запомнить (или найти) названия разных вариантов ... +1 =)

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

CSS3 теперь имеет свойство размера блока. Если вы установите, скажем,

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

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

Более того, размеры блоков поддерживаются всеми основными браузерами, кроме IE7 и ниже. квключают Для всех элементов в пределах ширины или высоты установите для размера поля значение border-box. ксовокупный Для других элементов ширины и / или высоты, которые являются значениями по умолчанию, вы можете установить box-sizing в «content-box».

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

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 Dave Burton30 янв. 2015 г., 15:55
Да, и у Пола Айриша есть хорошая статья об этом в блоге:paulirish.com/2012/box-sizing-border-box-ftw
 dippas02 сент. 2018 г., 16:34
Как этот ответ имеет так много откликов, когда тот же ответ, что и принятый, который был написан 3 года назад?

JQuery предоставлено два имуществаouterWidth () а такжеinnerWitdh () знатьширина объекта с или без границ ...

argin и width для одного и того же элемента. т. е. использовать что-то похожее на это

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>
 Man Personson25 июн. 2012 г., 21:45
Я использую этот метод на регулярной основе и никогда не сталкиваюсь с кросс-браузерными проблемами.

у меня была эта проблема, и это было из-за отсутствия объявленного типа документа. Мой любимый:

<!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>

Ваш ответ на вопрос