Как исправить эту ошибку CSS в IE7 и ниже? - PullRequest
Новая
       9

Как исправить эту ошибку CSS в IE7 и ниже?

0 голосов
/ 09 ноября 2011

Я недавно добавил немного css на свой сайт, он отлично работает во всех браузерах, кроме IE 7 и ниже, я не совсем уверен, почему, и я не гуру css (пока;)) и мой css может быть не прав, но не могли бы вы объяснить, что делает IE7 и меньше портит внешний вид сайта? Если вы сравните его в IE8 или любом другом браузере и IE7, вы поймете, о чем я говорю. Можете ли вы указать, где проблемы?

веб-страница: http://inelmo.com/inelmo

CSS на боковой панели: (я включил это только потому, что проблемы начались после добавления этой части кода) 

#sidebar {
    width: 440px;
    float: right;
}

/* Navigation Menu */
#navigationMenu {
    width: 50px;
    position: absolute;
    z-index: 99;
}

#navigationMenu li {
    list-style: none;
    height: 39px;
    padding: 2px;
    width: 40px;
}

#navigationMenu span {
    width: 0;
    left: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 39px;

    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    -ms-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a {
    background: url("../images/nav_bg.png") no-repeat;
    height: 39px;
    width: 38px;
    display: block;
    position: relative;
    text-decoration: none;
}

#navigationMenu a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}

#navigationMenu a:hover {
    text-decoration: none;
}

/* Home Button */
#navigationMenu .home {
    background-position: 0 0;
}

#navigationMenu .home:hover {
    background-position: 0 -39px;
}

#navigationMenu .home span {
    background-color: #7da315;
    color: #3d4f0c;
    text-shadow: 1px 1px 0 #99bf31;
}

/* Categories Button */
#navigationMenu .categories {
    background-position: -38px 0;
}

#navigationMenu .categories:hover {
    background-position: -38px -39px;
}

#navigationMenu .categories span {
    background-color: #1e8bb4;
    color: #223a44;
    text-shadow: 1px 1px 0 #44a8d0;
}

/* Top Button */
#navigationMenu .top {
    background-position: -76px 0;
}

#navigationMenu .top:hover {
    background-position: -76px -39px;
}

#navigationMenu .top span {
    background-color: #c86c1f;
    color: #5a3517;
    text-shadow: 1px 1px 0 #d28344;
}

/* AntiTop Button */
#navigationMenu .antiTop {
    background-position: -114px 0;
}

#navigationMenu .antiTop:hover {
    background-position: -114px -39px;
}

#navigationMenu .antiTop span {
    background-color: #af1e83;
    color: #460f35;
    text-shadow: 1px 1px 0 #d244a6;
}

/* Logo styling */
#logo {
    width: 390px;
    margin: 0 0 0 50px;
    position: absolute;
    z-index: -1;
}

/******/
#sideWrapper {
    width: 437px;
    background: url("../images/sidebar_strip.png") repeat-x;
    padding: 15px 0 0 3px;
    margin: 190px 0 0 0;
}

Ответы [ 3 ]

5 голосов
/ 09 ноября 2011

При использовании float:xxx вы также должны добавить display: inline для исправления более старого поведения IE.

В IE6 :hover работает только с <a>, исправление: http://peterned.home.xs4all.nl/csshover.html

Вы, кажется, используете position: absolute; без фактической установки top / left / и т. Д.

Используйте какой-нибудь 'pngfix', например http://www.twinhelix.com/css/iepngfix/, чтобы использовать прозрачные pngs.

Используйте гугл и такие сайты, как http://haslayout.net/, чтобы находить забавы, то есть ошибки.

3 голосов
/ 09 ноября 2011

Использовать сброс CSS

Добавьте этот код в начало вашего CSS

1 голос
/ 09 ноября 2011

Без примера вашего кода лучшее, что я мог бы предложить кому-то, начинающему, это построчно комментировать вышеуказанный CSS, пока вы не найдете точный CSS, который нарушает ваш макет. Другой трюк, который я использую, - это добавление цветов фона ко всему, чтобы вы могли визуально видеть, где что-то ломается.

...