IE7 CSS呈现问题

我正在使用Kartris作为电子商务网站。除了IE7以外，所有浏览器都很棒。有疑问的页面是： http://mellcrest.thecalicotree.co.uk/kartris/Default.aspx？IE7 CSS呈现问题

以下元素都显示奇怪，搜索框根本不显示。

<user:NavigationMenu ID="UC_NavigationMenu" runat="server" EnableViewState="False" /> 
<user:SearchBox runat="server" ID="UC_SearchBox" />

CSS的导航菜单是：

#section_searchbox 
{ 
    background-color:#5e99d2; 
    height: 23px; 
    background-image: url(images/menu_back.jpg); 
    background-repeat: repeat-x; 
    border-bottom: solid 1px #01366A; 
    border-top: solid 1px #01366A; 
    position:relative; 
    z-index:1; 

} 

#section_searchbox #searchprogress 
{ 

    padding: 0 0 0 0; 
    background-color:#5e99d2; 
} 

#section_searchbox #searchboxes 
{ 
    position: relative; 
    padding: 2px 7px 1px 7px; 
    float: left; 
    background-color:#5e99d2; 
    background-image: url(images/menu_back.jpg); 
    background-repeat: repeat-x; 
} 

#section_searchbox #searchboxes input 
{ 
    width: 200px; 
} 

#section_searchbox #searchboxes input.button 
{ 
    width: 50px; 
} 

#section_searchbox #searchboxes input.button:focus 
{ 
    border: 0px; 
}

来源

2011-12-12 Helen

在我的ie7中看起来不错... – ptriek

感谢您的反馈ptriek。也许IETester不提供真实的渲染。你有不同的浏览器可以比较吗？ – Helen

似乎确实只是IETester，我已经在Vista上安装了原始IE7，它看起来很好。在原来的IE6/WIN XP中搜索框被放在一个新的行（如IETester） – ptriek

只是</head>标签结束前添加此脚本：

<!--[if IE 7]> 
    <style type="text/css"> 

     /* Fixes the display of the menu */ 
     #header { 
      height:113px; 
     } 

     /* Fixes the search box display */ 
     #menubar { 
      width: 640px; 
     } 

     /* Fixes the display of boxes in rows 
      (IE7 doesn't understand display: inline-block) 
     */ 
     .slideshow, .slideshow2, .slideshow3, .slideshow4, .slideshow5, .slideshow6 { 
      float: left; 
     } 

     /* Fixes the animation transition */ 
     .slideshow a, .slideshow2 a, .slideshow3 a, .slideshow4 a, .slideshow5 a, .slideshow6 a { 
      height: 233px; 
      width: 233px; 
     } 

     /* Fixes the focus of the searchbox. */ 
     #searchboxes { 
      position: relative; 
      z-index: 100; 
     } 
    </style> 
<![endif]-->

它修复你的显示问题最多。

对于我来说，菜单和标题的显示方式与我在最近的浏览器（我与Chrome比较）中一样（在我的IETester中）。

来源

2011-12-12 13:37:26

感谢@ pinouchon，这改正了搜索框和幻灯片的图像。菜单仍然漂浮在内容之上，但看起来好多了。 – Helen

为搜索框的焦点问题编辑了我的答案。 –

IE7 CSS呈现问题

回答

相关问题