Проблема с размерами элементов в Chrome?

Question

[galkinrost]

Всем привет! Я не большой специалист в области верстки, но задача, о которой пойдет речь, казалась мне тривиальной и я не ожидал столкнуться с трудностями. Суть в следующем — сделать так . Казалось бы ничего сложного, и я привожу написанный мной код css . Однако в Chrome ширина и высота отличаются от тех, что указаны в стилях . Походив по форумам, я так и не смог найти ответ, но чувствую, что мне просто-напросто не хватает знаний каких-то очевидных для специалистов-верстальщиков вещей. Поэтому прошу подсказать, в чем может быть проблема. Заранее спасибо.

Answer 1

[LegoMushroom]

Хорошо бы увидеть живой пример. Попробуйте добавить в .social-icon i

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Comments

[galkinrost]

Спасибо за ответ, но проблема оказалась в том, что для родительского элемента было прописано свойство position: relative. Честно говоря, не понимаю, как это может влиять на результат, особенно учитывая то, что в IE10 элемент отображался нормально.

[LegoMushroom]

Врядли это единственная причина. Сделайте пожалуйста живой пример c проблемой здесь?

[galkinrost]

Страница с уже исправленным вариантом laserclubs.ru/

[max_rip]

Не правильно вы сделали, у вас иконка не кликабельная и элементов много
Лучше Текст
a {text-decoration:none}
a span{text-decoration:underline}
Бекграунд прописываете уже

Answer 2

[Слава]

могу ошибаться, но вы задавали высоту и ширину инлайеовому елементу.