2010-05-07 5 views
18

У меня проблема с IE (что еще?):Цвет «прозрачный» не работает

Я генерирую контент с CSS, который также имеет фоновое изображение. Я выглядит так:

#nav ul li:after { 
    content: "--"; 
    position: relative; 
    z-index: 99; 
    background: transparent url(image.png); 
    color: transparent; 
} 

Цвет текста в не-IE-браузеры прозрачных, но и во всех браузерах IE (IE6-IE8), это черный и вы могли видеть его. Как я могу сделать текст прозрачным/невидимым?

Я уже пробовал: видимость - непрозрачность - фильтр - текст-отступ ... Но никто не делал свою работу правильно, либо она исчезает (с этим фоном, который мне нужен), либо атрибут не применяется.

+1

Какая версия IE? Чтобы уточнить, есть черный '--', и это то, чего вы не хотите, не так ли?Это не все, что имеет черный фон? –

+0

Да. IE-версия: см. Выше – Poru

ответ

5

Я получаю: с правильным заполнением и нулевым размером шрифта! Установите для параметра padding-left значение один пиксель за пределы ширины изображения.

+1

, вы можете расширить этот ответ более подробно. –

+0

У меня нет проекта в сети, но я нашел, что это изменило CSS: '#nav li: after {content:". "; padding: 5px 0px 3px 0px; цвет: прозрачный; background: transparent url (bg-nav.png) no-repeat 0px 0px; позиция: относительная; z-index: 1; } ' – Poru

0

IE не поддерживает li:after последовательно. О каком IE вы говорите? IE6? IE7? И то и другое?

+0

От IE6 до IE8 – Poru

-1

Я вижу, что вы используете PNG в качестве фонового изображения. Обычно, если вы используете IE 6, есть исправление для прозрачности PNG (http://www.twinhelix.com/css/iepngfix/). Тем не менее, это не будет работать с фоновыми изображениями. Поэтому, если вы используете IE 6, на самом деле это не исправление.

+0

Если я правильно его понимаю, он говорит о том, что «цвет: прозрачный» не работает, а не фон. –

+3

@Pekka: Да, я тоже так думал, но почему изображение на заднем плане, если вы хотите, чтобы BG был прозрачным? Зачем устанавливать свойство «цвет» прозрачным? Это бессмысленно. По умолчанию все равно контейнеры прозрачны. Здесь много разъединений. – Robusto

+1

Я знаю, что это старый вопрос, но где он говорит, что OP использует прозрачный PNG? –

1

Я думаю, что никаких версий поддержки IE color: transparent Возможно, вы могли бы попробовать сделать это с помощью jQuery или что-то в этом роде.

1

Я предполагаю, что вы уже исправили это, но в последнее время я использовал очень большую высоту строки, когда текстовый отступ дает мне проблемы с макетами, в сочетании с переполнением: скрытый, чтобы скрыть текст.

7

что об использовании высоту строки

line-height:0;

он работал в моем случае.

+0

Удивительный, работал и на меня. Приветствия. –

+0

Старый ответ, но фантастический! – MHibbin

42

если то, что вы пытаетесь сделать, это показать изображение в качестве фона и не показывает текст использования

font-size:0px

это работает!

+0

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

+0

OMG это просто помешало мне, возможно, выбросить мой ноутбук из окна. Thanks =] – Brade

+1

Это вызывает проблемы с доступностью и показывает небольшую строку текста в некоторых старых браузерах. Дополнительную информацию см. В галерее замены изображений трюков CSS. – RobW

4

Если это не работает в Internet Explorer 8

font-size: 0; 

убедитесь, что вы используете правильный тип документа:

<!DOCTYPE html> 
2

Это должно работать. Если это не добавляет дисплей: блок или встроенный блок

.transparent { 
    text-indent: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
} 
+0

У меня было переполнение тела на авто. Это вызывало проблему с отображением цвета: прозрачным для углового компонента в хроме. Повторное отображение этого параметра (настройка переполнения по умолчанию) решило проблему. – Soggiorno

0

Для меня цвет: прозрачный не работает в IE8, и это показывало текст с цветом по умолчанию. Я использовал видимость: скрытый; для IE8 только в том случае, если текст не требуется для отображения.

Надеюсь, что эта помощь в случае, если элемент не требуется для отображения.

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