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

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

Как исправить это в CSS, так что обратно совместим с более поздними версиями (и текущей версии) ИЭ
ли мне нужен отдельный 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 { слева 170 пикселей; ширина: 89px; background-image: url (../ images/nav/new_nav.jpg); background-repeat: no-repeat; background-position: -200px 0px; }

источник

2010-03-19 Kim

Добро пожаловать в SO. Пожалуйста, покажите код, поэтому нам не нужно угадывать, какой метод вы используете для размещения изображений. –

Трудно ответить на это, не видя, как ваша разметка. Я знаком с этим методом, известным как спрайты, но я никогда не сталкивался с этой проблемой, используя их. – KTastrophy

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

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

источник

2010-03-19 16:48:08 orithena

??? Не могли бы вы рассказать, что вы подразумеваете под этим?Какой аспект использования позиций пикселей ненадежен в CSS и в каких ситуациях? –

'HTML просто не создан для пиксельно-точного дизайна.' Hobcobbles. В HTML вполне можно делать пиксельно-точный дизайн, и совершенно безопасно использовать значения пиксельных единиц. Всегда ли это * мудрый * - это другой вопрос. Проблема OP является чем-то очень специфичным и связана с «фоновой позицией», с которой у меня никогда не было проблем до настоящего времени, и я не считаю, что существует фундаментальная проблема. Мы точно будем знать, когда OP отправляет код. –

Длинный рассказ о том, почему это так: тем более, что я взял на себя сайт от кого-то другого, и клиент не хочет вообще менять дизайн, поэтому я очень ограничен в том, что могу делать. Чтобы сделать код лучше (хотя, поверьте, он намного лучше, чем когда он был в MODx). Я вытащил его и сделал его статичным. – Kim

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

/** Для IE6 / * html # сопутствующие товары { ширина: 300px; переполнение: видимое;
} * html # сопутствующие товары ul { позиция: относительная; Слева: -65px;
} * html # родственные продукты li { border: none;
} / Конец IE6 взломать **/

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

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

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

источник

2010-03-19 16:48:20

@ Ким вы можете отредактировать свой вопрос, лучше поместите его туда. Кроме того, код HTML ничего не говорит нам о базовом CSS. –

@Pekka: OK - я добавил CSS к исходному комментарию! – Kim

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

ответ

Смежные вопросы