Firefox 3 добавляет интервал к показателям с дисплеем: встроенный блок

В моем тесте у меня есть 2 прогона, для которых установлено: inline-block с рамкой для видимости. Firefox предоставляет пространство между каждым пролетом. Даже поле настройки: 0; заполнение: 0; не делает ничего, чтобы это исправить. Мое ожидание при установке встроенного элемента span для отображения: inline-block состоит в том, что 2 прогона визуализируются на одном уровне друг с другом, как если бы вы плавали 2 divs влево или вправо. Единственное "исправление", которое я нашел, - это добавить float: left или right to the spans, но это побеждает мою первоначальную цель - вообще не пытаться использовать float. Любые идеи?

<style>
    span{
        border:2px solid #000;

        display:inline-block;

        padding:0;
        margin:0;
    }
</style>
<span>Test</span>
<span>Test2</span>

Ответ 1

Он разделяет их, потому что у вас есть пространство между ними - новая строка.

Ответ 2

Вы также можете использовать комментарии, чтобы удалить пустое пространство между строками.

   <span>hou</span><!--
--><span>se#</span><!--
--><span>316</span><!-- outputs house#316 without spaces -->

Нет комментариев по поводу уродства (каламбур), но иногда это приемлемый способ сохранить разметку, выровненную правильно, пока она отображается правильно.

Отключить тему, но ВАЖНО: при использовании встроенного блока на прокрутках часто бывает очень полезно включить размер окна (-moz-box-sizing: border-box и т.д.), что позволяет измерять границы и отступы от внутри элементов. Это единственный практический способ использования процентных соотношений с интервалами внутристрочного блока и может сэкономить много связанных головных болей.

Ответ 3

Я не предполагаю, что есть способ разрешить пробелы на нескольких строках в разметке, пока они не отображают пространство?

Не совсем, но:

<span>...</span
><span>...</span>

Ответ 4

Решение Райана Митчелла работало хорошо для меня. У меня получилось что-то вроде этого:

.container { word-spacing: -1em; }
.container * { word-spacing: normal; }

Ответ 5

Не люблю эту ошибку. Что-то, что вы, возможно, захотите рассмотреть, это установить интервал слов в элементе контейнера на -1em. Я просто наткнулся на эту ошибку, поэтому я не уверен, насколько она практична, но она скроет это пространство.

Ответ 6

Фиксация FF2.0 FireFox 2.0 немного сложнее найти исправление, вы не можете применить стандартный взломанный браузер для атаки на FireFox 2, не затрагивая новые версии браузера. Вы можете спуститься по маршруту JS, но эти типы таргетинга на браузеры, похоже, длинны и немного завалены. Лучшим решением этой проблемы является использование значения "-moz-inline-stack" для атрибута "display".

Поскольку FireFox 2 не поддерживает встроенный блок, он поддерживает специфическое свойство отображения Mozilla -moz-inline-stack, которое отображается так же, как встроенный блок. Когда мы добавляем его перед "display: inline-block", FF2 игнорирует объявление "встроенный блок" и сохраняет -moz-inline-stack. Браузеры, поддерживающие встроенный блок, будут использовать его и игнорировать предыдущее свойство отображения.

Вот пример:

.itemname { display: -moz-inline-stack; display: inline-block; }

Этот ответ получен непосредственно из http://www.soak.co.uk/blog/firefox-2-ie6-and-inline-block/

Ответ 7

Если вы создаете чистый XHTML (и, скорее всего, вы этого не сделали, даже установка doctype не будет, если вы не будете показывать страницу пользователю как XML, а не HTML), тогда она будет отображаться так, как вы ожидаете.

Однако из-за вышеупомянутых отклонений HTML/XHTML он будет отображаться как одно пространство.