IE7 CSS рендеринг проблема - PullRequest
       5

IE7 CSS рендеринг проблема

0 голосов
/ 12 декабря 2011

Я использую Картрис для сайта электронной коммерции. Отлично смотрится во всех браузерах, кроме 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;
}

1 Ответ

1 голос
/ 12 декабря 2011

Добавьте этот скрипт непосредственно перед закрытием тега </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), как в последних браузерах (я сравнил с хромом).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...