Проблемы совместимости IE с WordPress

Question

Обычно шаблоны WordPress заботятся о кросс-браузерной совместимости для вас, но я в основном создал свой собственный, и мне не приходилось сталкиваться с проблемами IE в течение некоторого времени. Кажется, все работает нормально, кроме #social и #menu. CSS для них здесь:

#social {
float:left;
width:500px;
display:inline;
margin:333px 0 -420px 208px;
}

#menu {
display:inline;
background:transparent;
width:100%;
float:left;
margin:365px 0 0 -55px;
text-transform:lowercase;
}

А вот и сайт: http://www.erisdesigns.net/STAGE/ED1.3/

Я думаю, что это простая проблема позиционирования. Я действительно беспокоюсь только о том, чтобы заставить их работать в IE7 и IE8. Спасибо за любую помощь.

Answer 1

Если ширина / высота заголовка фиксирована, и вы хотите, чтобы каждый из этих элементов появлялся в определенной позиции в заголовке, использование float и margins - плохая идея.Вы ставите себя в зависимость от браузерных особенностей, и IE не очень милостив.Вместо этого используйте абсолютное позиционирование.

Сначала добавьте position: relative; к элементу #headercontent.(Или удалите его и просто используйте #header. Я не вижу смысла в наличии двух элементов div заголовка.) При необходимости также присвойте заголовку фиксированную высоту, чтобы он не сворачивался при перестановке других элементов.

Теперь разместите каждый элемент в заголовке (кавычки, меню и значки социальных сетей), используя position: absolute;, и присвойте фиксированные числовые значения их верхним и левым (или нижним и правым) свойствам.

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