Отладка CSS в обозревателе совместимости Internet Explorer 8 и режиме совместимости

Question

Я создал очень простое наложение jQuery, которое отлично работает в браузерах не Microsoft. Теперь я хочу отладить CSS для наложения, чтобы он работал в режиме просмотра совместимости IE 8 и в режиме Quirks.

Наложение можно увидеть по адресу http://pointlessandannoying.com/so/ - нажмите ссылку «о» в правом нижнем углу страницы, чтобы отобразить наложение. Кто-нибудь может предложить хорошее место, чтобы начать с отладки?

Answer 1

Если вам нужна справка по отладке кода

Вы можете устранить проблемы, связанные с причудами / совместимостью, с помощью принудительного просмотра стандартов IE8.Поместите <meta http-equiv="X-UA-Compatible" content="IE=edge" > в заголовок.

Если вам нужны средства отладки

Букмарклет Firebug Lite работает хорошо.IE также создает панель инструментов отладки , которая не так проста в использовании (imho).

Answer 2

Спасибо всем за советы - в конце концов я поручил эту работу на аутсорсинг, но все это хорошо для дальнейшего использования.

Answer 3

Одной из проблем, по-видимому, является размер оверлея - в style.css для высоты # about-wrapper и # about-lightbox-wrapper задано значение 200px.Я обнаружил, что изменение этого значения на 400px позволило бы видеть их как в IE, так и в других браузерах.

Единственная оставшаяся проблема - невозможность доступа к области наложения (область «О программе»).Вы можете рассмотреть возможность использования некоторого jQuery для изменения z-индекса на show / hide, чтобы он был доступен.

В script.js:

Рассмотрите возможность изменения:

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

что-то вроде:

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#about-overlay').css('z-index',250); //Line Changed
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-overlay').css('z-index',0); // Line Changed
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

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

Answer 4

В чем именно заключается проблема, с которой вы, похоже, сталкиваетесь - я вижу, что наложение отображается в IE8 (и в режиме совместимости и т. Д.), Однако кажется, что оно обрезано в нижней части, и к нему также нельзя нажать

Это может быть проблема, связанная с z-индексом наложения или, возможно, с тем, как он расположен (относительно или абсолютно), поскольку я знаю, что семейство IE не любит наложения.Я еще покопаюсь, чтобы узнать, смогу ли я найти что-нибудь.