我的导航栏在IE8中看起来很糟糕。从字面上看，这只是链接，根本没有样式发生

Question

我已经在下面添加了CSS。该网站在Chrome、Opera和Firefox中看起来还不错，但在IE中的导航效果很糟糕。绝对没有任何造型，而且看起来很糟糕。我也在我的html中添加了一个html5shim。

/* NAV BAR */
#nav_bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: url(../images/header-fade.gif) repeat-x;
border-bottom: 1px solid #ccc;
}

#nav_bar nav {
border-left: 1px solid #ccc;
}

    #nav_bar nav a {
display: inline-block;
width: 23%;
margin: 0;
padding: 22px 0;
text-transform: uppercase;
color: black;
text-align: center;
border-right: 1px solid #ccc;
text-decoration: none;
font: 20px "Trebuchet MS", Arial, sans-serif;
    }

Answer 1

从您的超文本标记语言判断，您使用的是HTML5 nav元素。

IE8不识别语义HTML5元素，如nav、header、footer、article、section等，因此您需要将其更改为HTML4元素(div或ul或类似)或添加一个Javascript polyfill，如或HTML5Shim，以向旧版本的IE添加HTML5元素兼容性。

例如，在您的<head>中

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

Answer 2

您是否尝试过查看如何将CSS规则应用于F12工具中的元素？它们真的可以帮助您查看实际应用了哪些规则和样式，您可以在工具中对其进行调整，以查看它将如何影响您的布局。