Как получить консистенцию рендеринга текста абзаца <p>во всех браузерах?

Question

Как получить консистентный рендеринг

текста абзаца во всех браузерах?

См. IE 7 рендеринг вот так

альтернативный текст http://easycaptures.com/fs/uploaded/248/0266470505.jpg

и FF какэтот .что нормально для клиента

альтернативный текст http://easycaptures.com/fs/uploaded/248/8655561297.jpg

Как получить одинаковый результат в обоих браузерах, я имею в виду FF-рендеринг в IE?мой клиент нуждается в "неисполнительном" в одной строке во всех браузерах, является <br /> единственным решением этой проблемы.

Обновление: см. весь код для <p> здесь http://easycaptures.com/fs/uploaded/248/4505395091.jpg

IЯ уже использую XHTML 1.1 doctype и eric meyer reset CSS

Обновление: 28 марта

Спасибо за все ответы!

Я проверял эту проблемутолько не заходит на firefox.но входит во все другие браузеры IE6, 7, 8, Safari (windows), Google Chrome.

Есть ли какая-либо возможность решения css only сейчас?

Answer 1

Для вашей конкретной проблемы, используйте тег <nobr> вокруг вашего текста или интервал с CSS

whitespace: no-wrap;

Это предотвратит разрывы строк между неисполнительными лицами.

Тем не менее, вы должны заметить, что получить абсолютно согласованный рендеринг довольно сложно между браузерами и платформами.

Answer 2

Обновление

Скорее всего, вы устанавливаете фиксированную ширину и с отступом слева и справа от элемента. IE и Firefox будут интерпретировать это по-разному из-за различий блочной модели. Если вы не можете перекодировать свою страницу, чтобы использовать фиксированную ширину и левое / правое поле, вам нужно будет указать другую фиксированную ширину в таблице стилей только для IE, чтобы компенсировать проблему.

Образование

Веб-разработка - это образование. Большая часть этого образования учит вашего клиента тому, чего ожидать, а чего не ожидать.

Помогите, объяснив своему клиенту, что каждый браузер и комбинация ОС обрабатывают шрифты немного по-своему. Один двигатель может размещать буквы немного ближе друг к другу, чем другой.

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

Техническая мысль: Кажется, что оба браузера уже отрисовывают текст настолько близко, насколько могут, я не думаю, что reset.css вам вообще поможет.

Answer 3

Вы можете посмотреть на использование мягкого дефиса & Застенчивый

Answer 4

Это на самом деле не имеет ничего общего с полями, отступами, шрифтами, перезагрузками или любым CSS. Это о том, как браузеры интерпретируют дефисы. IE, очевидно, решает, что он может разбить строку на дефисе, тогда как Firefox рассматривает его как одно слово.

Как сказал McPherrinM, вы можете использовать тег без перерывов: <nobr>non-executive</nobr>. Или вы можете просто удалить дефис.

Или вы могли бы просто объяснить своему клиенту, как все браузеры и системы отображают текст по-разному, и вы не сможете предотвратить это в любых ситуациях. В чем проблема с разбиением слова на две строки?

Answer 5

Сброс всех стилей, чтобы избавиться от различий в таблицах стилей браузера, может быть хорошей идеей. reset.css от YUI может сделать это за вас. затем вы можете начать с нуля, чтобы отформатировать абзацы, используя проценты для размера шрифта, пробелов и т. д. (см. YUI CSS cheatsheet ).

РЕДАКТИРОВАТЬ: Только что видел ваш комментарий к ответу Cletus. Итак: какой CSS вы используете для размещения текста?