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呈現問題

回答

相關問題