Использование «display: block» в Internet Explorer 11

Question

Есть ли у кого-нибудь подсказки/рекомендации для работы с IE quirks? У меня есть код, который хорошо работает в любом другом браузере, но, к сожалению, он не играет хорошо в IE. Я думаю, что я сузил его до кода display:block, который я использую в CSS, чтобы изменить внешний вид ul в меню навигации.

Каждый другой браузер рассматривает display:block как ожидалось: стилизация распространяется на весь список «блок». Вот код, я работаю с:

HTML:

<nav id="nav"> 
<ul id="main_ul"> 
    <li class="main_li">  
     <a class="hyper_nav" title="Home" href="index.html">Home</a> 
    </li> 
    <li class="main_li">  
     <a class="active_nav" title="Link 1" href="link1.html">Link 1</a> 
    </li> 
    <li class="main_li">  
     <a class="hyper_nav" title="Link 2" href="link2.html">Link 2</a> 
    </li> 
    <li class="main_li">  
     <a class="hyper_nav" title="Link 3" href="link3.html">Link 3</a> 
    </li> 
</ul> 

CSS:

#main_ul { 
margin:0px; 
padding:0px; 
} 
.main_li { 
    width:165px; 
    background:#a3dc32; 
    float:left; 
    display:inline; 
    text-align:center; 
    text-transform:uppercase; 
    font-size:20px; 
    padding:7px 0px; 
} 
.main_li + .main_li { 
    border-left:2px solid #ffffff; 
} 
.hyper_nav, .hyper_nav:link { 
    text-decoration:none; 
    color:#ffffff; 
    display:block; 
} 
.hyper_nav:hover, .hyper_nav:visited, .active_nav, .active_nav:link, .active_nav:hover, .active_nav:visited { 
    text-decoration:none; 
    display:block; 
    background:#7F52A8; 
    /color:#ffffff; 
    padding:10px 0px; 
    margin:-10px 0px; 
} 

И скрипка является here.

У меня есть следующий код в моем head теги, которые я понимаю, должен получить IE правильно работать с HTML5, но это ничего не решает:

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

Можно ли предлагать какие-либо советы или рекомендации, пожалуйста, ?

Answer 1

Если вы нацелены на a элемент выглядит все-таки и в IE: http://jsfiddle.net/qvfqwa3y/5/

.hyper_nav, .hyper_nav:link a { 
    text-decoration:none; 
    color:#ffffff; 
    display:block; 
}