CSS: IE обрезает верхний и нижний элементы - PullRequest
1 голос
/ 02 февраля 2011

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

В Chrome и Firefox все это отображается правильно, как вы можетесмотрите на изображениях ниже.Примечание. Я искусственно переместил вкладки в пустую область страницы, чтобы было легче увидеть, что происходит.

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

enter image description here

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

enter image description here

Теперь, очевидно, 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 намного выше, чем они должны быть на всякий случай, если возникла странная проблема с высотой.Ничто, кажется, не решает это.

Ответы [ 2 ]

2 голосов
/ 02 февраля 2011

Установить ссылку на «display: inline-block;».Что касается IE6 / 7, выполните «display: inline; zoom: 1;»вместо этого.

Я видел эту проблему раньше на элементах блока.Решение "inline-block", кажется, исправило это.

1 голос
/ 02 февраля 2011

Попробуйте добавить float: left; Вполне возможно, что ваш отступ даже не работает.

если это решение не работает, сделать другой CSS для IE и установить другую высоту для IE. Кроме того, попробуйте разместить на своем веб-сайте кнопку, предлагающую посетителям загрузить Firefox или Chrome это сделает интернет лучше! : D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...