Нужно центрировать ul внутри div ie6 и ie7 - PullRequest
Новая
       37

Нужно центрировать ul внутри div ie6 и ie7

6 голосов
/ 25 ноября 2010

У меня есть ul, который мне нужен, чтобы центрироваться в div. Код, который я имею (вы найдете ниже), работает в любом браузере, кроме ie6 и ie7, где контент перемещается влево, а не по центру. Я разобрал свой код до самых основ. Я пытался обойти многочисленные исправления, но пока безуспешно, поэтому любая помощь по этому вопросу будет принята с благодарностью. 

//CSS
#galleryThumbs {
    width:900px;
    height:125px;
    text-align:center;
    margin:0px auto;
}
ul.thumb {
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
}
ul.thumb li {
    width:65px;
    height:65px;
    margin:0 2px 0 2px;
    border:1px solid #ffffff;
    display:inline-block;
    float:left;
}

//HTML
<div id="galleryThumbs">
    <ul class="thumb">
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li>
    </ul>
</div>

Большое спасибо заранее Брендан

Ответы [ 4 ]

11 голосов
/ 25 ноября 2010

IE 6 и IE 7 не поддерживают display:inline-block

Вы можете переопределить это с помощью хака IE CSS для inline-block элементов 

zoom: 1;
*display: inline;

Я бы поместил их в условные комментарии IE только для целевой IE.

Демо на http://www.jsfiddle.net/gaby/qArVS/2

2 голосов
/ 25 ноября 2010

IE6 / 7 не поддерживает display: inline-block для элементов, которые по умолчанию display: block.См. Также Quirksmode.org: CSS2 - Объявление display :

IE 6/7 принимает значение только для элементов с натуральным display: inline.

<ul> по умолчанию display: block, поэтому это не сработает.

Одним из решений является присвоение <ul> фиксированной ширины, чтобы его можно былоцентрированный к его родителю margin: 0 auto.

1 голос
/ 25 октября 2011

Решение без взлома для Internet Explorer 7 добавляется в ваш код так: 

    #yourdiv {
            width: 100%;
            position: relative;
            text-align: center;
    }

            #yourdiv ul {
                    float: left;
                    position: relative;
                    left: 50%
                    text-align: center;
            }

                    #yourdiv ul li {
                            float: left;
                            position: relative;
                            display: block;
                            right: 50%;                
                    }

С этим вы можете центрировать несортированный список в Internet Explorer 7 без хаков.

0 голосов
/ 25 ноября 2010

Приведенное выше (я имею в виду решение с объявлением ширины для UL) - единственное решение, к которому я пришел.Кстати, 2 вещи:

1- Ваше объявление для Doctype вызывает режим причуд, потому что теги img не в должном порядке закрыты в стиле xhtml.

2- Paniyar разработал новое свойство дляПоплавок, ЦЕНТР.Этого не существует.По крайней мере, не в моих книгах.

Мои два цента ...

...