IE8 display inline-block issue

По какой-то причине IE-8 не отображает мое меню в строке. (Прилагается изображение) Мой код:IE8 display inline-block issue

#navigation #main-menu { 
    display: inline-block; 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    text-align: center; 
    line-height: 18px; 
    font-size: 12px; 
    list-style: none; 
}

я нашел следующую запись IE8 display inline-block not working. Пробовал добавить Doctype, а также добавил этот код:

<!-- [if lt IE 8]> 
<style type="text/css"> 
    #navigation #main-menu { 
    display: inline; 
    } 
</style> 
<![endif]-->

По-прежнему не работает, любой совет? вы можете увидеть изображение с вопросом здесь: http://preciseos.com/PreciseOs/Untitled.jpg

Вот HTML код:

<ul style="margin-top:20px;margin-right: 10%;" class="nav-collapse collapse" id="main-menu"> 
    <li class="active"><a href="#page-welcome">Home</a></li>            
    <li class=""><a href="#page-about">About</a></li> 
    <li><a href="#page-features">Services</a></li> 
    <li><a href="#page-work">Work</a></li>      
    <li><a href="#page-contact">Contact</a></li>

Вы также можете увидеть проблему в www.preciseos.com.

Спасибо, Oz

источник

2014-01-05 Oz Porat

Немного html и больше css было бы здорово, так как теперь неясно, какой элемент - это главное меню и что внутри него. – drip

Внутри CSS, если условие put: ''. Помогает ли это? – yuvi

Спасибо, я добавил код HTML –

Во-первых, убедитесь, что вы нацелены на li элемент с селектором

#navigation #main-menu li

, а также попробовать использовать float вместо display: inline;

#navigation #main-menu li { 
    display: block; 
    float: left; 
    margin-right: 10px; 
}

источник

2014-01-06 10:28:44 jjgrainger

Спасибо, я попробовал. Это не сработало –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Почему не добавляй является?? который является ответом вашего источника. Дайте ему попробовать

IE8 будет рассматривать его как элемент уровня блока, если не используется флоат

Примечание:

Я отправил доктайп как комментарий, но он был поврежден, поэтому отправляю это как ответ

Обновлено:

HTML

<ul id="main-menu"> 
    <li class="actives"><a href="#page-welcome">Home</a> 

    </li> 
    <li class="actives"><a href="#page-about">About</a> 

    </li> 
    <li class="actives"><a href="#page-features">Services</a> 

    </li> 
    <li class="actives"><a href="#page-work">Work</a> 

    </li> 
    <li class="actives"><a href="#page-contact">Contact</a> 

    </li> 
</ul>

CSS

.actives { 
    display: inline; 
    padding:10px; 
    float: left; 
} 
a { 
    text-decoration:none; 
}

Demo

источник

2014-01-06 10:38:25

Причина, ломает макет является IE8 does'nt поддержка HTML5 элементы, такие как nav.

Вместо этого вы можете использовать тег <div> или попробовать включая яваскрипт Обход HTML5shiv для поддержки IE

источник

2014-01-06 10:44:45

Он не использует HTML5, нет элемента в его html под названием nav – yuvi

Похоже, вы были правы. –

@OzPorat Попробуйте исправить, я предложил и дайте мне знать –

Как сказал Surjith SM, то IE8 не поддерживают элементы HTML5, такие как нав. Проблема была решена путем добавления следующего кода:

<!--[if lte IE 8]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

html5shi (м | v) создает DOC элементы для всех элементов html5 поэтому стили из вашего CSS может пнуть в поведение по умолчанию для IE является игнорировать неизвестно. элементы. Для получения дополнительной информации см. header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

источник

2014-01-07 06:37:42

IE8 display inline-block issue

ответ

Смежные вопросы