Фоновое изображение CSS на теге a не отображается в IE8 - PullRequest
1 голос
/ 23 февраля 2012

Я исследовал это и обнаружил некоторые ошибки IE CSS, но ни одно из известных исправлений, по-видимому, не покрывает этот сценарий.

Этот сайт запущен сегодня, и проблема была обнаружена в том, что логотип не отображаетсяв некоторых версиях IE8.Если человек сбрасывает IE до заводских настроек, он работает, но в противном случае логотип не виден.

Сайт можно увидеть здесь: http://www.ethicsgame.com/exec/site/index.html

CSS для отображения логотипа:

h1 a {

background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;

}

Ответы [ 5 ]

2 голосов
/ 23 февраля 2012

, похоже, работает нормально на моем IE8, вы пытались добавить display: inline-block к его css? Кроме того, для хорошей меры вы можете добавить   внутрь тега.

так вы получите:

<h1><a href="index.html">&nbsp;</a></h1>

просто так оно имеет содержание ...

удачи -ck

0 голосов
/ 26 января 2014

ie8 не поддерживает положение фонового изображения, в вашем случае «левый центр». Если вы удалите «центр слева», он должен работать. Вы можете указать положение фонового изображения, если укажете! DOCTYPE

0 голосов
/ 23 февраля 2012

Он отлично работает на IE8, но если не отображаются более ранние версии IE, замените center на left в атрибуте background.

0 голосов
/ 23 февраля 2012

Мэри,

Это связано с тем фактом, что теги A являются встроенными элементами.в IE <8 высота / ширина элемента не отображается, поэтому он сворачивается и становится невидимым.Добавление <code>display: block; в ваше объявление CSS для этого элемента исправит это в IE <8. Вы захотите применить этот же принцип к другим встроенным элементам, которые вы пытаетесь заставить вести себя больше как элементы уровня блока (настройка ширины/ height / margin / padding, как правило, хороший намек на это поведение). </p>

Если вам не нужно поддерживать IE 5.5 (что в настоящее время большинство людей не поддерживает), вы также можете использовать display: inline-block; (имейте в виду, что IE 6-7 поддерживает только встроенный блок для элементов, которые являются встроенными элементами, такими как A, SPAN, STRONG, EM и т. д.).Вы можете найти много полезной информации о совместимости здесь: http://quirksmode.org/css/display.html

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

Использование панели инструментов разработчика в IE - отличный способ протестировать старые версии, а также протестировать эти решения в более старых версиях.

0 голосов
/ 23 февраля 2012

Похоже, разница между IE8 и Chrome.Проверьте это в скрипке: http://jsfiddle.net/5Vt3f/.

В основном ваше изображение, вероятно, отображается слишком далеко влево, чтобы его не видеть.и «центр» на изображении.Это противоречиво.Он либо слева, либо по центру.

...