Question

我试过..

<!--[if IE 7 ]>
    <link href="http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if IE 8 ]>
    <link href="http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/ie8.css" rel="stylesheet" type="text/css">
<![endif]-->

CSS

header{
    position: relative;
    background:#7a2652;
    height: 75px;
}
header #telephone {
    float: right;
    color: #fff;
    margin-top: 10px;
    padding-right: 10px;
    width: auto !important;
}
header #telephone p {
    padding: 0;
    margin: 0;
    font-size: 10px;
    float: left;
    margin-top: 2px;
    color: #fff;
}
header #telephone img {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}

/*
--------------------------------------------------------------------------------------- nav
*/

nav#primary-menu {
    height: 37px;
    position: absolute;
    right: 2px;
    top: 38px;
    width: 685px;
    list-style: none outside none;
}

nav#primary-menu div {
    background: none repeat scroll 0 0 #833B5D;
    float: right;
    height: 37px;
    margin-left: 32px;
    width: 645px;
}

nav#primary-menu ul#menu-mainnav {
    list-style: none outside none;
}

nav#primary-menu ul#menu-mainnav li {
    height: 37px;
    margin: 0 -10px 0 -37px;
    overflow: visible;
    padding-left: 37px;
    padding-right: 10px;
    position: relative;
    width: 80px;
    z-index: 1;
    float:left;
    display: inline-block;
    list-style: none outside none;
}

nav#primary-menu ul#menu-mainnav li:hover:last-child {
    background: url("images/nav-last-bg.png") no-repeat transparent;
}

nav#primary-menu ul#menu-mainnav li:first-child {
    background: url("images/nav-first-bg.png") no-repeat scroll left center transparent;
}       

nav#primary-menu ul#menu-mainnav li:hover {
    background: url("images/nav-current-bg.png") no-repeat scroll left center transparent;
}

nav#primary-menu ul#menu-mainnav li.current-menu-item {
    background: url("images/nav-current-bg.png") no-repeat scroll 0 0 transparent;
}

nav#primary-menu a {
    color: #FFFFFF;
    float: left;
    font-size: 9px;
    line-height: 120%;
    padding-bottom: 8px;
    padding-top: 7px;
    text-align: left;
    text-decoration: none;
    width: 60px;
}

nav#primary-menu a:hover {
    color: #FFFFFF;
}

nav#primary-menu a:visited {
    color: #FFFFFF;
}

nav#primary-menu ul#menu-mainnav li ul.sub-menu {
    list-style: none outside none;
}

但是并尝试添加一些CSS，但没有发生任何事情，请告诉我做什么..

该网站在Firefox中看起来不错，但在IE中完全搞砸了。请帮助我如何在IE中对此进行排序。

http://i.stack.imgur.com/Xp51g.jpg

请查看上面的图片并指导我如何解决问题。

Answer 1

您正在使用IE支持的HTML5元素。

将此js http://code.google.com/p/html5shiv/用于IE的HTML5标记支持。

Answer 2

在IE中，触发了怪异模式，因为该页面包含许多HTML和CSS错误。这弄乱了你的页面。使用W3C HTML validator检查您的网站并修正这些错误。

Answer 3

您正在使用HTML5，请使用：

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

导航在IE中无法正确显示

3 个答案: