Изменение CSS для изображений навигационной панели в соответствии с IE

Question

Моя горизонтальная навигационная панель заполнена изображениями для ссылок, которые идут от одного изображения, которое включает в себя все подизображения; каждое изображение навигационного элемента идентифицируется местоположением пикселя в большем изображении. Это прекрасно работает в Firefox и Safari, но в IE все изображения расположены слишком низко в пределах навигационной панели (видны только верхние части слов). Два вопроса:

• Как это исправить в css, чтобы он был обратно совместим с более свежими версиями (и текущими версиями) IE
• Нужна ли отдельная таблица стилей IE?

Вот CSS (урезано только для нескольких ссылок):

ul#navbar {
    width: 750px;
    height: 22px;
    margin: 0px;
    padding: 0px;
    text-indent: -9999px;
    border: none;
}
ul#navbar li {
    float: left;
    height: 22px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border: none;
    /*position:absolute;*/
}
ul#navbar li a {
    display: block;
    height: 22px;
    border: none;
}

.home {
    left: 0px;
    width: 78px;
    background-image: url(../images/nav/new_nav.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.classes {

    /*left: 78px; */
    width: 92px;
    background-image: url(../images/nav/new_nav.jpg);
    background-repeat: no-repeat;
    background-position: -100px 0px; 
}

.training { слева: 170px; ширина: 89 пикселей; background-image: url (../ images / nav / new_nav.jpg); повторение фона: без повтора; background-position: -200px 0px; }

Answer 1

Я использовал * .html для IE 6

/ ** Для IE6 / * html # related-products { ширина: 300 пикселей; Переполнение: видимый;
} * html # related-products ul { позиция: относительная; слева: -65px;
} * html # related-products li { граница: нет;
} / Конец взлома IE6 ** /

В противном случае есть условные комментарии IE.

http://www.quirksmode.org/css/condcom.html

Что касается отдельной таблицы стилей, которую вы можете создать, то ваш язык на стороне сервера определит браузер, и если Internet Explorer обеспечит добавление вашего IE, в противном случае вы можете добавить их в существующий файл CSS. Я сделал оба.

Answer 2

Ну ... я думаю, вы не хотите этого слышать, но: Никогда, никогда не полагайтесь на точные позиции пикселей в HTML / CSS (карты изображений накладываются на одно изображение являются единственным исключением).

HTML просто не предназначен для точного пиксельного дизайна. Из вашего описания, даже нет возможности для изящного отката в браузерах, которые не поддерживают одну из технологий, на которые вы, похоже, полагаетесь. А как насчет экранов, которые слишком узки, чтобы показать вашу полную навигационную панель (например, мобильные устройства)? В лучшем случае вы получите многострочную навигационную панель, но из вашего описания она будет нарушена, поскольку позиция будет неправильной ...