CSS IE8 can't style a list element

2019-02-28 19:48发布

I'd like to make an ordered list, centered and without bullets. The big gap is that I can't stylize it into explorer 8. It doesn't align horizontally, while in all other browser it does. I read a lot around the web, but I couldn't find the solution. My last trying has been to copy the code I found here in "stack overflow", Horizontal Lists without floating the LI but also in this way I couldn't get it to work. Please help me! I'll post my code here HTML:

<nav class="orizNav">
        <ul>
    <li><a href="onoranze.php" name="noi"><h3>chi siamo</h3></a></li>
    <li><a href="servizi.php" name="servizi"><h3>servizi</h3></a></li>
    <li><a href="epigrafiol.php" name="epigrafionline"><h3>epigrafi on line</h3></a></li>
    <li><a href="contatti.php" name="contatti"><h3>contatti</h3></a></li>
    <li><a href="index.php" name="inizio"><h3>inizio</h3></a></li>
    </ul>
</nav>

and here the CSS

.orizNav ul {
list-style: none;
padding-bottom: 10px;
height:16px;
}
.orizNav ul li {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
}
.orizNav {
position: relative;
margin-top: -30px;
text-align: center;
font-family: Fog;
font-size: 14px;
}

2条回答
beautiful°
2楼-- · 2019-02-28 19:55

Try adding this in your css file

header, nav, article, footer, address {  
    display: block;  
}

http://jsfiddle.net/alleks/n8z6W/

查看更多
Ridiculous、
3楼-- · 2019-02-28 20:07

Your problem is not with your CSS but rather with the HTML5 <nav> tag that you've added, IE8 doesn't recognise that as a valid HTML tag.

Just stick this block of code in the head of your document:

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->

And add this piece of CSS to make IE behave.

CSS

header, nav, section, article, aside, footer, hgroup { 
   display: block;
}
查看更多
登录 后发表回答