2012-05-09 54 views
1

我正在使用.. IE测试人员和Adobe浏览器实验室检查IE可比性..但一位朋友告诉我使用IE开发工具栏及其功能.. IE浏览器模式IE7 ..整个网站看起来不同,那么IE浏览器测试仪和Adobe浏览器实验室..可以是有谁能告诉我..这是一个能够信任..IE7问题与标题

IM在http://www.mulberrydesignerkitchens.com/,但在IE7中工作的头完全以崩溃..请有人帮助我解决了这个问题..我尝试了所有我已知的方式,但没有很好的输出。

这是我面临的IE7中的bug:(从@matmuchrapnaPIC)

enter image description here

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

和I M使用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; 
} 
+0

请提供与此相关的块加入 –

+0

CSS一些CSS ......我使用的IE ..测试仪和Adobe浏览器实验室检查IE可比性 –

+0

..但一个朋友告诉我使用IE浏览器工具栏及其功能IE浏览器模式IE7 ..整个网站看起来不同,然后IE测试器和Adobe浏览器实验室..可以有人告诉我..哪一个是可以信任的.. –

回答

1

尝试添加该

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

在我即:

enter image description here

+0

不..没有任何事情发生。 –

+0

我在ie7.css文件中添加了这个值.. div#telephone { position:absolute; top:10px; right:0px; } –

+0

非常感谢你亲爱的..它真的工作.. –

-1

设置报头以显示:块;下载并使用HTML5希夫:

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

希望帮助:)

+0

我已经使用这个.. \t \t \t \t \t'<! - [如果LT IE 9]> ' –

+0

通常有而不需要现代化者的溶液中,特别是对于一个问题如像这个一样基本。 –

+0

如果没有一些鼓励,IE中不支持HTML5元素,所以实际上需要这样做。 – will

1

刚使用position: absolute;标签:

div#telephone { 
    position: absolute; 
    top: 10px; 
    right: 0px; 
} 
+0

谢谢..但顶级位置不是必需的... ... - –