1

我正在使用.. IE-tester 和 adobe browser lab 来检查 IE Comparability.. 但一位朋友告诉我使用 IE Developer Toolbar 及其功能.. IE Browser Mode to IE7 .. 整个网站看起来与 IE tester 和adobe浏览器实验室..有人可以告诉我..哪个是值得信赖的..

我在http://www.mulberrydesignerkitchens.com/上工作,但在 IE7 中,它的标题完全崩溃了.. 请有人帮我解决这个问题.. 我已经尝试了所有已知的方法,但输出效果不佳。

这是我在 IE7 中面临的错误:(来自@matmuchrapna 的图片

在此处输入图像描述

任何人都可以帮我解决问题。

我使用 html5

<header>
    <a href="/">
        <img id="logo" src="images/logo.png" height="75" width="287" title="HomePage" alt="Mulberry Kitchen Studios" /></a>
    <div id="telephone">
        <p>Showrooms: Norwich </p><img src="images/tel-norwich.gif" alt="" /><p> Beccles </p><img src="images/tel-beccles.gif" alt="" />
    </div>
    <nav id="primary-menu">
        <div class="menu-mainnav-container">
            <ul id="menu-mainnav" class="menu superfish sf-js-enabled">
                <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a title="Contemporary Kitchens" href="http://www.mulberrydesignerkitchens.com/contemporary-kitchens/">Contemporary Kitchens</a></li>
                <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Traditional Kitchens" href="http://www.mulberrydesignerkitchens.com/traditional-kitchens/">Traditional Kitchens</a>
                    <ul class="sub-menu">
                        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a title="Traditional Oak Kitchens" href="http://www.mulberrydesignerkitchens.com/traditional-kitchens/traditional-oak-kitchens/">Traditional Oak Kitchens</a></li>
                        <li id="menu-item-395" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-395"><a title="Unique Traditional Kitchens" href="http://www.mulberrydesignerkitchens.com/norwich-kitchens/unique-traditional-kitchens/">Unique Traditional Kitchens</a></li>
                        <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Quality Kitchens" href="http://www.mulberrydesignerkitchens.com/classic-kitchens/">Classic Kitchens</a></li>
                    </ul>
                </li>
                <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="Bespoke Kitchens" href="http://www.mulberrydesignerkitchens.com/bespoke-kitchens/">Bespoke Kitchens</a></li>
                <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a title="Accessories &amp; Appliances" href="http://www.mulberrydesignerkitchens.com/kitchen-accessories-appliances/">Accessories &#038; Appliances</a></li>
                <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="All inclusive service" href="http://www.mulberrydesignerkitchens.com/all-inclusive-service/">All inclusive service</a></li>
                <li id="menu-item-736" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-736"><a href="http://www.mulberrydesignerkitchens.com/norwich-kitchens/recent-projects/">Recent Projects</a></li>
                <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a title="Information &amp; Articles" href="http://www.mulberrydesignerkitchens.com/kitchen-information/">Information &#038; Articles</a></li>
                <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a title="Contact Us &amp; Maps" href="http://www.mulberrydesignerkitchens.com/contact-us-maps/">Contact Us &#038; Maps</a></li>
            </ul>
        </div>
    </nav>
</header>

CSS

header{
    position: relative;
    background:#7a2652;
    height: 75px;
    display: block;
}
header #telephone {
    color: #FFFFFF;
    float: right;
    margin-top: 10px;
    padding-right: 10px;
    width: 370px;
    position: relative;
    top: 0px;
}
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#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;
}

/*
nav#primary-menu ul#menu-mainnav li ul.sub-menu li {
    background-color: #833B5D;
    height: auto;
} 
*/

nav#primary-menu ul#menu-mainnav li ul.sub-menu li {
    background-color: #833B5D;
    height: auto;
    margin: 0;
    padding: 6px 12px;
    width: 120px;
}
nav#primary-menu ul#menu-mainnav li ul.sub-menu li a {
    margin: 0;
    padding: 5px;
    width: 120px;
}

nav#primary-menu ul#menu-mainnav li ul.sub-menu li:hover {
    background-color: #8e4d69;
}

nav#primary-menu ul#menu-mainnav li ul.sub-menu li.current-menu-item {
    background: none repeat scroll 0 0 #8E4D69;
}
4

3 回答 3

1

尝试添加这个

#telephone {
    position: absolute;
    right: 0;
}

在我的即:

在此处输入图像描述

于 2012-05-09T10:43:05.593 回答
1

只需使用position: absolute;标签:

div#telephone {
    position: absolute;
    top: 10px;
    right: 0px;
}
于 2012-05-09T10:48:57.417 回答
-1

设置要显示的标题:block; 并下载并使用 HTML5 shiv:

http://code.google.com/p/html5shiv/

希望有帮助:)

于 2012-05-09T10:15:02.620 回答