CSS вертикальное выравнивание IE 6 & 7 проблема - PullRequest
Новая
       7

CSS вертикальное выравнивание IE 6 & 7 проблема

1 голос
/ 23 октября 2010

Привет, у меня есть следующий код: 

...
                    <li><a href="">
                        <span class="nr">2</span>
                        <span class="item">Despre clinic&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">3</span>
                        <span class="item">Servicii</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">4</span>
                        <span class="item">Echipa medical&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
...

и css: 

#footer .navi { margin: 0; padding: 0; list-style: none; }
#footer .navi li { width: 207px; height: 85px; background: url(../images/footer_navi.gif) 0 0 no-repeat; float: left; vertical-align: middle; display: table-row; }
#footer .navi a { width: 207px; height: 85px; color: #CC0000; text-decoration: none; }
#footer .navi span.img { height: 85px; vertical-align: middle; display: table-cell; }
#footer .navi span.item { height: 85px; padding: 0 5px; width: 83px; font-size: 16px; vertical-align: middle; display: table-cell; }
#footer .navi span.nr { height: 85px; padding: 0 9px; width: 9px; font-size: 20px; color: #FF9999; vertical-align: middle; display: table-cell; }

Как видите, у меня установлена ​​ширина для .item, поэтомумои текстовые оберткиТак как IE не поддерживает ячейку таблицы и строку таблицы, я сделал * html #footer .navi li {display: block;} и встроенный блок для моих промежутков.

Теперь у меня есть 2 проблемы:

  1. мой текст не будет перенесен, если я не установлю максимальную ширину для IE6 & 7
  2. , несмотря на использование взлома звездой. IE6 & 7 все равно не будет хорошо отображаться

Есть идеи?Спасибо

1 Ответ

1 голос
/ 23 октября 2010

Одна из самых сложных вещей, которые можно сделать с таблицей без CSS.

Мой код изначально предназначен для элементов img с элементами div вокруг, но должен работать так же.

Иерархия добавлена ​​для пояснения. 

li {
    width:207px;
    height:85px;
    float:left;
    text-align:center;
    display:table;
    overflow:hidden;
    #position:relative;
    #z-index:1;
}
li a {
     #display:block;
     #position: relative;
     #top: -50%;
     #left: -50%;
     display:table-cell;
     vertical-align:middle;
     margin:0 auto;
}
li a span {
    #display:block;
    #position: absolute;
    #top: 50%;
    #left: 50%;
    display:table-cell;
    vertical-align:middle;
    margin:0 auto;
}
...