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

Question

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

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

        display:inline-block;

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

Решение Райана Митчелла хорошо сработало для меня. Я закончил с чем-то вроде этого:

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Вот пример:

.itemname { дисплей: -moz-inline-stack; дисплей: встроенный блок; }

---

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

Answer 7

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

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