Проблема с пропуском / разницей в Firefox / IE

Question

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

Вот код, который я написал

HTML

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li>
        <li>Something else</li>
        <li>Something else 2</li>
        <li>Something else 3 </li>
        <li>Something else 4</li>
    </ul>
</div>

CSS

#outer {
    background-color: #0000ff;
    width: 500px;
}

#list {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#list li {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    white-space:nowrap;
    height: 24px;
    padding: 0px;
    background: #ff0000;
    margin: 0px;
}

Отлично работает в Chrome.

В Firefox / IE между каждым прямоугольником добавлен небольшой вертикальный пробел / поле.

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

Кто-нибудь знает, почему это происходит?

Answer 1

Попробуйте поместить все теги <li> в одну строку.Браузеры отображают разрыв строки как пробел.

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li><li>Something else</li><li>Something else 2</li><li>Something else 3</li><li>Something else 4</li>
    </ul>
</div>

Answer 2

Вам просто нужно добавить vertical-align: top к #list li: http://jsfiddle.net/thirtydot/PF4fW/

Каждый раз, когда вы используете display: inline-block, вам следует рассмотреть возможность установки vertical-align.

Посмотрите на «Серию А» здесь , чтобы сравнить различные возможные общие значения.

Answer 3

Можете ли вы вместо этого использовать плавающие block элементы или они должны быть inline-block elements?

Вот ваш пример , ивот код, работающий с плавающими элементами в термоусадочной пленке.