Почему одинаковые свойства CSS в разных браузерах выглядят по разному?

Question

[Имя Имечко]

Почему одинаковые свойства CSS в разных браузерах выглядят по разному?


Сам код CSS

.footer {
	height: 40px;
	line-height: 40px;
	border-top: 1px solid #cccccc;
	margin-top: 20px;
}

.footer-left {
	float: left;
}

.footer-right {
	float: right;
}

.stroke {
	padding: 3px;
}

.stroke:hover {
	background-color: #428bca;
	border-radius: 5px;
	color: #fff;
}

.stroke a {
	display: inline-block;
	height: 100%;
}

Код HTML

<div class="footer">
	<div class="footer-left">
		2015 © <span class="stroke"><a href="">Сайт.ру</a></span>
	</div>
	<div class="footer-right">
		<span class="stroke"><a href="">О компании</a></span>
		<span class="stroke"><a href="">Реклама</a></span>
		<span class="stroke"><a href="">Вакансии</a></span>
		<span class="stroke"><a href="">Обратная связь</a></span>
		<span class="stroke"><a href="">Помощь</a></span>
	</div>
</div>

Answer 1

[Имя Имечко]

Решение нашел. Я убрал все теги span и применил эти стили к тегу a.

Comments

[Алексей]

Хм, интересно.. надо пробовать.. Тоже столкнулся..
Ну прям до смешного... В Firefox кнопка в нужном месте стоит, а в Google Chrome - вообще в другом..
Отказывался верить в увиденное..

Answer 2

[Volodimir Babeshko]

Есть как минимум две причины:

1. у каждого браузера есть свой дефолтный файл стилей, когда верстальщик пишет свои стили, то дефолтные стили браузера переопределяються, например, заголовки выделяются полужирным и имеют определенный размер. Чтобы избавиться от этой проблемы обычно используют сброс стилей.
   
2. каждый браузер, точнее движок браузера, по-разному может интерпретировать некоторые свойства, не считая багов. Для избавления от этой причуды можно просто переверстать, используя другие приемы
   

Answer 3

[Антон]

.stroke a {
  display: inline-block;
  height: 100%;
}

из-за display: inline-block; неправильно отображает

Comments

[Имя Имечко]

А как же мне сделать ссылку блочной?

Answer 4

[Сократ]

Не все теги HTML стандартизированы полностью. Некоторые не воспринимаются частью браузеров вообще, некоторые по-разному. Существуют способы определения каким именно браузером открывается страница Интернета.

1.Вариантов решения проблемы примерно две. Рисовать сайт более простыми способами, с использованием только стандартизованных тэгов. 2.Либо определять каким браузером открыта страница и показывать всяческие финтифлюшки только там, где они работают.