Как я могу добиться идеального позиционирования пикселей и расстояния между текстовыми элементами в браузерах?

Question

В настоящее время мы пытаемся добиться согласованного форматирования элементов textarea в Safari / Chrome / Firefox / IE на Mac и Windows. Я полагаю, что это может быть кроличья нора, поскольку любая их комбинация может привести к форматированию немного по-другому - может быть, одна комбинация добавляет немного отступа к элементу div здесь иначе, чем другая, другая разбивает там многострочный текст иначе, чем остальные и т. д.

Вместо использования textarea (или div) элементов, можем ли мы добиться идеального позиционирования с использованием HTML5 canvas? Или используя библиотеку Raphael JavaScript? Или, может быть, какая-то другая библиотека JS?

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

(на данный момент я бы предпочел избегать решений на основе Flash, если только это не решение only ...)

Answer 1

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

Answer 2

Я бы сказал, что это почти невозможно.

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

Что нас должно беспокоить, так это то, что контент хорошо выглядит в каждом браузере.

Тем не менее, вот большой список textarea трюков: http://css -tricks.com / 6841-textarea-tricks /

Answer 3

Одна из основных причин, по которой существует PDF, заключается в том, что браузеры имеют формат, не идентичный пикселям, а формат PDF.Помимо прочего, даже гарнитуры не гарантируются одинаковыми от одной ОС / браузера к другой.

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

Answer 4

Я не уверен, возможно ли это, однако вы можете рассмотреть одну вещь - использовать панель инструментов веб-разработчика для Firefox или надстройку веб-разработчика для Chrome. Существует возможность отключить стили браузера по умолчанию. Проверьте это и затем введите все . Границы, тип границы, все поля, отступы, цвета фона и т. Д. Затем снова включите стили браузера по умолчанию и убедитесь, что они выглядят одинаково. Если нет, вымойте, сполосните и повторите.

Кроме того, если шрифты играют определенную роль, вам придется встроить их в страницу, поскольку в некоторых операционных системах может не быть установлен определенный шрифт.

Answer 5

Было бы одно решение, чтобы начать свой CSS с чистого листа?Дайте всем известное значение по умолчанию?

Например, я запускаю свои css-файлы следующим образом, поэтому я всегда знаю, чего ожидать:

*{
margin:0;
padding:0;
}

Это то, что вы ищете?Точно так же вы можете изменить «*» на «textarea».