Проблемы с совместимостью 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 и полей - плохая идея. Вы ставите себя на милость особенностей браузера, и IE не очень милостив. Вместо этого используйте абсолютное позиционирование.

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

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

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