Ширина 100% больше, чем родительский div

Я работаю над темой vBulletin, но в списке нитей каждый поток имеет 100% ширины, но потоки также больше, чем их родители, но когда я удаляю границу потоков, они будут соответствовать родительскому div:). поэтому подумайте, что эта проблема находится на границах.

Вы можете видеть, что лучше на jsfiddle (нить - белая фигура с черной рамкой) 

<body>
   <div class="after-body">
        <div class="body-wrapper">
             <div class="threadlist">
                    <ol class="threads">
                        <li class="threadbit"><div class="thread"></div></li>
                        <li class="threadbit"><div class="thread"></div></li>
                    </ol>
             </div>
        </div>
   </div>
</body>

ОТВЕТЫ

Ответ 1

Проблема здесь в том, что width представляет собой размер внутренней области с текстом, а прокладка с границей "обернута" вокруг него. Эта спецификация не имеет смысла, но за ней следуют самые современные браузеры.

Ваш спаситель называется box-sizing: border-box;.

.threadbit .thread {

    /* ... some stuff ... */

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Посмотрите здесь: jsFiddle

Подробнее об этой собственности здесь и здесь.

Ответ 2

Да, вы правы, границы вытесняют "ширину" элемента. Это стандартный box-sizing современных браузеров. В большинстве случаев это может быть изменено с помощью объявления типа:

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

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

ИЗМЕНИТЬ

Прошло некоторое время, так как мой оригинальный ответ и поддержка браузера немного изменились. Firefox 29, Chrome 10, Safari 5.1 и Internet Explorer 8 поддерживают всю поддержку box-sizing unprefixed, однако есть несколько известных проблем из определенных версий.

Полный/обновленный список доступен на caniuse.com, но вот несколько из них, которые я нашел важными с сайта:

  • IE8: игнорирует box-sizing: border-box, если используется min/max-width/height
  • IE8: свойство min-width применяется к content-box, даже если для параметра box-sizing установлено значение border-box
  • IE9: ширина полосы прокрутки вычитается из ширины элемента при установке на position: absolute и либо overflow: auto, либо overflow-y: scroll

По мере снижения доли рынка для IE8 и IE9 эти проблемы и другие, перечисленные на caniuse, будут в меньшей степени проблемой в будущем.

Ответ 3

Всегда помните, когда вы сталкиваетесь с проблемами, связанными с размерами проверки ширины элемента через коробчатую модель из инструмента разработчика Firefox или из хромированной метрической коробки. Его всегда хорошая идея включить

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

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

Вот ссылка для свойства box-sizing http://www.paulirish.com/2012/box-sizing-border-box-ftw/