У меня раздражающая проблема с отображением в IE (7/8).У меня есть несколько вкладок, которые служат для навигации, по какой-то причине у вкладок есть верхняя и нижняя части, несмотря на мои усилия по увеличению размера окна.
В Chrome и Firefox все это отображается правильно, как вы можетесмотрите на изображениях ниже.Примечание. Я искусственно переместил вкладки в пустую область страницы, чтобы было легче увидеть, что происходит.
Как это выглядит в IE:

Как это выглядит в Chrome

Теперь, очевидно, IE не отображает закругленные углы, это нормально (если кто-то не знает что-тоЯ не знаю, но, как вы можете видеть, высота ссылок в IE меньше, чем в Chrome, и фактически обрезает верхнюю границу.
HTML
HTML просто<a>
элементов внутри <div>
, например, так:
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
Как вы можете видеть, я пытался решить эту проблему, задав нормальныйline-height
, а также сделать overflow
видимым.Я также попытался сделать ссылки и содержащие div намного выше, чем они должны быть на всякий случай, если возникла странная проблема с высотой.Ничто, кажется, не решает это.