Проблемы с переворачиванием CSS в Internet Explorer 7

Question

Я написал немного CSS в своем HTML-коде для создания кнопок переключения. Тогда я попытался запустить его с IE 7 и удивить! это не работает. На самом деле это показывает и кнопку и основной ролловер. Как я могу обойти невозможность IE кешировать фоновые изображения? Желательно использовать CSS, но javascript «will» будет пытаться.

Пример CSS:

 #Menu 
 { 
    width: 100%; 
    height: 32px; 
    margin-top: 93px;
    padding-left: 13px;
}


 #Menu a 
{ 
    height: 32px; 
    line-height: 32px; 
    width: 123px; 
    background: url("img/menu.png") top left no-repeat; 
    background-position: -123px 0; 
    float: left; 
    margin-left: 3px; 
    text-decoration: none; 
    color: #1e1e1d; 
    font-size: 12px; 
    text-align: center; 
}

 #Top #Menu a:hover, #Top #Menu a.active 
{ 
    background-position: 0px 0; 
    text-decoration: underline;
}

Answer 1

Ну, во-первых, вы даете противоречивые инструкции ...

background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;

... фон уже позиционирован с использованием сокращения.

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

background-position: -123px 0;

... а для вашего наведения и активного состояния используйте ...

background-position: bottom left;

Тогда оба ваших состояния должны быть на одном изображении, одно под другим (я полагаю, это то, что вы пытались в любом случае).

Answer 2

Проблема с переносом изображения возникает в основном из-за загрузки изображения каждый раз при наведении на ссылку или вкладку. Это мерцание вызвано задержкой, когда основное изображение удаляется и загружается пролонгированное изображение (даже если это технически одно и то же изображение, Internet Explorer предпочитает обрабатывать их отдельно).

проверьте это полное исправление для проблемы опрокидывания: http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

Answer 3

Убедитесь, что ваш синтаксис CSS background правильный. Некоторые браузеры позволяют указывать свойства в любом порядке, однако IE будет подавляться. Вы должны указать вложение в виде X Y (горизонтальное, а затем вертикальное). В настоящее время у вас есть top left. Сделай это left top. Также у вас есть no-repeat в конце строки, он должен идти сразу после объявления url и перед объявлением позиции.

Порядок использования сокращенных значений фона CSS должен быть следующим:

• цвет фона
• Фоновое изображение
• фон-повторить
• фон положение
• фон-вложение

например. background: #fff url(example.jpg) no-repeat left top fixed;

Answer 4

если вы используете псевдо-селектор: hover, то он не будет работать в IE, если это не тег привязки. Попробуйте изменить кнопку в якорь. Вы все еще можете сделать его похожим на кнопку, используя css.

Если вы хотите использовать javascript, взгляните на jQuery .