2012-02-23 4 views
0

Я пытаюсь добавить подсветку к тексту, но у меня проблемы с высотой участков выделения. Результат был разным в браузере, но, вероятно, самым худшим является Chrome. Вот ссылка на страницу, иллюстрирующую проблему.Chrome добавляет дополнительную высоту к встроенным элементам

http://home.everestkc.net/pardnero/addedheight/

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

Спасибо!

+4

Возможно, вы могли бы упомянуть, что эти другие способы обойти это и почему вы отвергли их, чтобы другие не предлагали те же исправления? –

+0

Если это не что-то * очень * тонкое, оно выглядит одинаково для меня в Chrome, Firefox, IE, Safari и Opera. –

+0

Это немного тонкий, но достаточно заметный, чтобы создать головную боль. Вы можете видеть, что желтый фон второй линии перекрывает две другие строки. В Chrome добавленная высота встроенного элемента перекрывает окружающие элементы, тогда как в FF и некоторых версиях IE встроенный элемент все еще имеет увеличенную высоту, но окружающие элементы не перекрываются. Я бы использовал встроенный блок, но мне нужен этот выделенный текст для переноса на несколько строк, и если я использую встроенный блок, подсветка не будет содержаться в тексте и вместо этого будет закрывать область «блок». – ahamill

ответ

0

Установка display: inline-block; на <span> получает смежные <p> линии, чтобы очистить его.