У меня проблемы с рендерингом якорного элемента в IE (IE9 в моем случае).
Если вы посмотрите на изображение, приведенное ниже, вы можете заметить что-то вроде плохого заполнения или неправильного позиционирования второго элемента. В подобных вопросах я нашел a { display: inline-block } как решение, но, похоже, оно не работает для меня.
Однако я заметил, что при воспроизведении некоторых свойств CSS, таких как clear или height или других, по-видимому, без какой-либо логики, рендеринг может быть правильным.
Спасибо!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
body {font-family:sans-serif; font-size:12px;}
a {height:13px;}
p {clear:both; float:left;}
.link {clear:both; float:left; border:1px solid #00f; background-color:#0f0;}
</style>
</head>
<body>
<p>TEXT</p>
<a class="link" href="my_page.html">ABCDEF</a>
<p>TEXT</p>
<a class="link" href="my_page.html">ABCDEF</a>
<p>TEXT</p>
<a class="link" href="my_page.html">ABCDEF</a>
<p>TEXT</p>
<a class="link" href="my_page.html">ABCDEF</a>
</body>
</html>