Question

我正在将Kartris用于电子商务网站。除IE7外，在所有浏览器中看起来都很棒。有问题的页面是： http://mellcrest.thecalicotree.co.uk/kartris/Default.aspx？

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

 <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;
}

Answer 1

在关闭</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]-->

它修复了大多数显示问题。

对我来说，菜单和标题的显示方式与我最近的浏览器相同（在我的IETester中）（我与chrome相比）。

IE7 CSS渲染问题

1 个答案: