Firefox / Gecko добавляет интервал вокруг блоков inline-block?

Question

Я знаю, что настоящая цель, которую я ищу, - это Святой Грааль, но в этом действительно простом эксперименте я получаю "призрачный" интервал, который, я надеюсь, кто-то может объяснить.

в Firefox происходит следующее, но не в Chrome (хотя в Chrome есть свои проблемы, о которых я расскажу позже):

HTML:

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS:

#wrapper {
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 90px;
    background-color: red;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

Обратите внимание, что я использовал цвет фона вместо границ, чтобы не возникало проблем с интервалами между ящиками (о которых я знаю).

Если я проверяю каждый div (внешний и внутренний) в Firebug,ширина правильная, но между каждым делением и третьим делением явно есть зазор до следующей строки.

Это происходит до тех пор, пока я не установлю ширину в 761px, при этом каждый делитель имеет зазор около 3-4 пикселя между каждым внутренним делителем и 1-2 пикселя после последнего.

Итак, все поля, отступы и границы отключены, откуда берется этот интервал и есть ли путь (без плавающих или отрицательных полей)установить этот интервал в 0?

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

Кто-нибудь знает, откуда взялся этот пробел?

Answer 1

Определить font-size:0; для его родителя DIV. Напишите так:

#wrapper {
    font-size:0;
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div{
 font-size:15px;
}

Проверьте это http://jsfiddle.net/CXr5A/

OR

Вы можете написать свой внутренний div в одну строку, как это:

<div id="wrapper">
    <div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>

Проверьте это http://jsfiddle.net/CXr5A/2/

Answer 2

Это как-то связано с font-size.Если вы задаетесь вопросом о правильном способе выполнить то, что вы пытались, используйте этот CSS вместо этого и попробуйте.

Совет: всегда делайте привычку применять глобальный сброс перед запуском файла CSS.

CSS:

*{
    padding: 0px;
    margin: 0px;

}

#wrapper {
    width: 750px;
    height: 100px;
    background-color: yellow;

}

#wrapper div {
    width: 250px;
    height: 90px;
    display: block;
    float: left;
    background-color: red;
    font-size:15px;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

Answer 3

Избавьтесь от пробелов в HTML.Это решит вашу проблему.

<div id="wrapper">
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>​

Вместо этого вы можете добавить div{margin-right: -4px;}

Дополнительная информация в этой статье .

fiddle.