IE 7 не отображает ссылки в полном размере - PullRequest
Новая
       13

IE 7 не отображает ссылки в полном размере

0 голосов
/ 29 марта 2011

Это моя разметка: 

<div class="contentSubBox">
    <h5>Please choose a report</h5>
    <div class="arrowNavigation">
        <div class="arrowNavigationLeft">
            <a href="#" class="button">&lt;&lt;</a>
            <a href="#" class="button">&lt;</a>
        </div>
        <div class="arrowNavigationCenter">Page 1 of 8</div>
        <div class="arrowNavigationRight">
            <a href="#" class="button">&gt;</a>
            <a href="#" class="button">&gt;&gt;</a>
        </div>
    </div>
</div>

И это CSS, который идет с ним (соответствующая часть): 

div.arrowNavigation { position: relative; text-align: center; width: 200px;}
div.arrowNavigation div.arrowNavigationLeft, div.arrowNavigation div.arrowNavigationRight { position: absolute; text-align: left; }
div.arrowNavigation div.arrowNavigationLeft { bottom: 0; left: 0; }
div.arrowNavigation div.arrowNavigationRight { bottom: 0; right: 0; }
.button { background: url("http://www.pimco.com/_layouts/PIMCOdotCOM/images/backgrounds/client-access.png") top left repeat-x #EBF2EB; border: 1px solid #B3C3B7; padding: 3px 8px; }

У меня проблема в том, что IE 7 отсекает верхнюю и нижнюю часть кнопок. В Mozilla Firefox это выглядит примерно так, как я хочу:

enter image description here

Internet Explorer делает это:

enter image description here

Относительное расположение не несет ответственности. Я пытался плавать, и это не сработало. Ручная установка высоты, минимальной высоты или размера шрифта ссылок или контейнера также не помогла.

Если я изменю одну ссылку на <input type="button" class="button"/> это будет выглядеть так:

enter image description here

Так что изменение высоты путем добавления другого элемента как-то работает. Я действительно хочу этого избежать.

Есть идеи?

Спасибо!

Ответы [ 2 ]

2 голосов
/ 29 марта 2011

Попробуйте добавить hasLayout к .button, добавив общее исправление zoom: 1.

Я не пробовал, но это похоже на проблему, которую можно решить, предоставив поврежденным элементам "layout".

1 голос
/ 29 марта 2011

Попробуйте задать div.arrowNavigation некоторую высоту.Попробуйте 26px;

...