Ваша главная навигация распадается в IE7, потому что она не правильно определяет, что и где и как. Во-первых, ваш логотип является своего рода «плавающим» внутри документа, поскольку он расположен абсолютно без какой-либо точки отсчета в своем контейнере, поэтому давайте начнем с исправления этого;
Добавьте position:relative к вашему #header-wrapper правилу CSS, чтобы мы могли правильно разместить ваш логотип в его границах:
#header-wrapper {
position:relative;
}
Далее, мы должны изменить ваш логотип, чтобы он находился посередине вашего #header-wrapper div. Раньше вы использовали margin: -57px auto 0 auto; для выравнивания вашего логотипа, но, поскольку вы уже позиционировали его абсолютно, маржа вообще не нужна (чудо, что он вообще работал), поэтому давайте сделаем некоторую математику, чтобы абсолютно позиционировать ваш логотип в середина вашего заголовка оболочки div:
Сначала мы исключаем эту декларацию и заменяем ее следующим текстом:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Теперь, что мы здесь сделали? Сначала мы отодвинули ваш логотип на 50% слева, а затем отодвинули его назад с отрицательным полем на -102,5 пикселей. Почему мы это сделали? Поскольку объявление left выдвигает ваш элемент с шириной, добавленной к вычислению, поэтому push фактически означает «50% влево + ширина вашего элемента», поэтому мы используем отрицательное поле для компенсации ширины, 50% - width/2 , Здесь - лучшее объяснение процесса.
После завершения двух перечисленных мной изменений вы увидите, что логотип находится за областью слайд-шоу, это связано с ошибкой ie7 z-index и исправление на самом деле очень простое:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
Мы исправляем это, определяя раздел заголовка как position:relative и даем ему z-index больше, чем область слайд-шоу, таким образом, ваш логотип будет поверх слайд-шоу.
Теперь, чтобы исправить положение панели поиска влево, а не вправо, мы должны определить ваш #social-share раздел как position:absolute, а затем сдвинуть его вправо с помощью right:0, почему? Потому что IE7 позиционирует вашу строку поиска прямо рядом с #social-share, который выдвигается наверх с помощью отрицательного поля, и, следовательно, не удаляется из потока, как ожидалось (был удивлен, что на самом деле он работал в современных браузерах). Итак, определите ваш #social-share раздел как абсолютный, и проблема решена:
#social-share {
position:absolute;
right:0;
}
И последнее исправление - это условный класс, который мы собираемся использовать для нацеливания вашего тега #_atssh <div>, чтобы расположить его относительно вашего документа. IE7 не принимает это во внимание, потому что он абсолютно позиционирован и поэтому длинный пробел удаляется.
Мы можем воспользоваться вашими условными классами, добавленными к вашему тегу <html> по шаблону и нацеливаясь только на IE7, с исправлением:
.ie7 #_atssh {
position:relative;
}
Примечание. Вероятно, существует миллиард опечаток и грамматических ошибок, я написал их во время обеда, поэтому в будущем я вернусь к этому и исправлю их.