Background-position и кроссбраузерность

@Tsokolov · Регистрация: 17.10.2014

Author24 — интернет-сервис помощи студентам

Пишу сайт, в котором используются спрайтовые изображения для кнопок. Стандартно задаю background-image, background-position, background-size, background-repeat. Так вот, в разных браузерах кнопки по-разному отображаются. Возникает эффект при наведении на кнопки, или пункты меню как будто они прыгают. Делал reset css не помогло. Помогите пожалуйста кто компетентен в этом вопросе.

@almaz1994 · 17.10.2014, 17:33

Ссылку можно?

Добавлено через 1 минуту
background-image??? Либо я как то не так думаю, либо нужно задавать

CSS

1	background: url('images/image.jpg');

@Tsokolov · 17.10.2014, 18:22 **[ТС]**

Вот ссылка на сайт: http://domination.company У меня в Firefox прыгают кнопки меню, и на странице авторизации
http://domination.company/ru/site/login та же беда с кнопками.

@almaz1994 · 17.10.2014, 18:39

Сообщение от Tsokolov

У меня в Firefox прыгают кнопки меню

Для начала оставь "background" попробуй

Добавлено через 8 минут
И убери все конфликты. Я вижу что ты маргин 0 auto задаешь, потом margin-top определяешь, а потом определяешь margin-left; Сделай более грамотно. Такие конфликты могут по разному читаться ИМХО.

@Tsokolov · 17.10.2014, 21:16 **[ТС]**

Поставил background, ничего не поменялось.

@Fedor92 · 17.10.2014, 22:03

Попробуйте убрать background-size... Как вариант...

Добавлено через 8 минут
А вообще напоминает ситуацию когда неровно порезан контент... Либо размеры блока больше, чем размеры фоновой картинки или не совпадают размеры активной и неактивной картинки... Вопрос из любопытства, а почему бы не сделать данное меню с помощью hover?

@Tsokolov · 17.10.2014, 22:09 **[ТС]**

Если делать через hover, то получается эффект мелькания изображения в момент, когда оно подгружается.

@Fedor92 · 17.10.2014, 23:19

Сообщение от Tsokolov

Если делать через hover, то получается эффект мелькания изображения в момент, когда оно подгружается.

Tsokolov, не совсем понимаю о чём Вы, но не суть... Вообще когда смотрел Ваш код в хроме - инспектор элементов выдал 17 ошибок и 1 ворнинг... Это всё о "тараканах" собственно Вам на заметку... В html ничего особо криминального нет, чтобы могло вызывать подобные лаги... Поэтому остаётся 2 варианта либо проблемы действительно с контентом - тогда кнопки бы прыгали по идее во всех браузерах - либо в js-коде с анимацией(где указаны css-стили), что наиболее вероятно...

@Tsokolov 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
		1
	Background-position и кроссбраузерность 17.10.2014, 15:43. Показов 1275. Ответов 7 Метки нет (Все метки) Пишу сайт, в котором используются спрайтовые изображения для кнопок. Стандартно задаю background-image, background-position, background-size, background-repeat. Так вот, в разных браузерах кнопки по-разному отображаются. Возникает эффект при наведении на кнопки, или пункты меню как будто они прыгают. Делал reset css не помогло. Помогите пожалуйста кто компетентен в этом вопросе. 0

@Tsokolov 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
	17.10.2014, 18:22 [ТС]	3
	Вот ссылка на сайт: http://domination.company У меня в Firefox прыгают кнопки меню, и на странице авторизации http://domination.company/ru/site/login та же беда с кнопками. 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	17.10.2014, 18:39	4
	Сообщение от Tsokolov У меня в Firefox прыгают кнопки меню Для начала оставь "background" попробуй Добавлено через 8 минут И убери все конфликты. Я вижу что ты маргин 0 auto задаешь, потом margin-top определяешь, а потом определяешь margin-left; Сделай более грамотно. Такие конфликты могут по разному читаться ИМХО. 0

@Tsokolov 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
	17.10.2014, 21:16 [ТС]	5
	Поставил background, ничего не поменялось. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.10.2014, 22:03	6
	Попробуйте убрать background-size... Как вариант... Добавлено через 8 минут А вообще напоминает ситуацию когда неровно порезан контент... Либо размеры блока больше, чем размеры фоновой картинки или не совпадают размеры активной и неактивной картинки... Вопрос из любопытства, а почему бы не сделать данное меню с помощью hover? 0

@Tsokolov 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
	17.10.2014, 22:09 [ТС]	7
	Если делать через hover, то получается эффект мелькания изображения в момент, когда оно подгружается. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.10.2014, 23:19	8
	Сообщение от Tsokolov Если делать через hover, то получается эффект мелькания изображения в момент, когда оно подгружается. Tsokolov, не совсем понимаю о чём Вы, но не суть... Вообще когда смотрел Ваш код в хроме - инспектор элементов выдал 17 ошибок и 1 ворнинг... Это всё о "тараканах" собственно Вам на заметку... В html ничего особо криминального нет, чтобы могло вызывать подобные лаги... Поэтому остаётся 2 варианта либо проблемы действительно с контентом - тогда кнопки бы прыгали по идее во всех браузерах - либо в js-коде с анимацией(где указаны css-стили), что наиболее вероятно... 0