Как отображать одинаковые поля для каждого браузера?

У меня есть изображение холста HTML5, где я нарисовал несколько точек, и я хочу выровнять некоторые теги div и теги ввода текста рядом с точками.Как отображать одинаковые поля для каждого браузера?

К сожалению, браузеры не согласны с пространством между каждым тегом div и тегами ввода.

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

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

ввода текста метки выравнивания работают с каждым браузеров с CSS хак: http://jsfiddle.net/baptx/XcKZj/

Div теги выравнивание не то же самое в зависимости от браузера (сконфигурированной для Firefox): http://jsfiddle.net/baptx/92gPY/

Я использую Firefox на Linux, и я заметил, что версия Windows не дает одинаковые поля. Chrome также не согласен с Linux Firefox при работе в Linux или Windows. Opera замечательная, она всегда согласна с Linux Firefox, работающей под Linux или Windows.

Сначала я подумал, что это связано с движком веб-браузера, по сравнению с Webkit, по-разному, по сравнению с Webkit, но если Windows и Linux версия Firefox не согласна, это должно быть что-то еще.

Есть ли у кого и идея, откуда он исходит, и как исправить это с помощью тегов div?

источник

2012-06-12 baptx

не столько ответ, почему, но это хорошая причина для использования сброса CSS. http://www.cssreset.com –

Хорошо, я узнал новую вещь благодаря сообществу stackoverflow, сброс CSS :) Используя сброс Эрика Мейера, это испортит мою позицию холста http://jsfiddle.net/92gPY/6/и используя библиотеку Yahoo, это ничего не изменит. http://jsfiddle.net/92gPY/7/ Теперь я попытался добавить только сброс div Meyer, но проблема все еще здесь http://jsfiddle.net/92gPY/8/ Есть ли у кого-то рабочее решение? cc @MoinZaman – baptx

Почему: поскольку в заданной таблице стилей не указаны интервалы, такие как поля.

Решение: используйте таблицу стилей сброса CSS и явно объявляйте свои собственные значения по умолчанию в таблице стилей вашего сайта.

Вот сайт с некоторыми возвратами: http://www.cssreset.com/

источник

2012-06-12 14:10:37 Marcin

Спасибо, но я не могу заставить его работать http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx

@baptx Вы делаете это неправильно.Включите таблицу стилей WHOLE reset, а затем явно объявите все свойства, которые вам требуются, отличные от нуля. – Marcin

Ха-ха благодарит всех, кто сейчас работает! http://jsfiddle.net/92gPY/26/ Сброс CSS Эрика Мейера сделал трюк, мне пришлось установить tr & td vertical-align на «top». После этого мне пришлось найти хорошие пиксели высоты/края div для соответствия интервалу пикселей, который я установил при рисовании точек на изображении холста :) Вопрос только в том, что я слышал, что использование CSS-сброса не очень-то хорошее потому что он удаляет все стили, а некоторые здесь, чтобы сделать веб-страницу лучше. Некоторые люди говорят, что лучше использовать базовую таблицу стилей, например, http: //fvsch.com/code/base-stylesheet/, которая будет только исправлять стиль. Как вы думаете? – baptx

Это звучит, как вам нужно включить CSS сброса в ваши стили. Это поможет унифицировать (но не полностью устранить) различия между браузерами.

Вот два популярных перезагружается:

Eric Meyer's reset

YUI Reset

источник

2012-06-12 14:13:57 digitaldreamer

Я пробовал обе библиотеки, но я не могу получить кросс-браузерное решение http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx

Как отображать одинаковые поля для каждого браузера?

ответ

Смежные вопросы