ie7 display: inline

Question

Я знаю, что этот вопрос задавали сто раз, и я чувствую, что посмотрел на все 100 сообщений, но это заставляет меня сходить с ума.

Клянусь, это последний совместимый с IE7 сайт, который я когда-либо сделаю. Слишком много денег потрачено впустую. Я предлагаю вам сделать то же самое. Я все еще жду, чтобы мой чек от Microsoft стал извиняющимся за все те деньги, которые вы потеряли, развивая наше программное обеспечение дерьма.

В любом случае! Пришлось говорить.

Вопрос, дисплей: inline не действует для меня. Я перехожу к редактированию IE7 для этой страницы: http://www.buxback.com/, и заголовок навигации просто делает некоторые странные вещи, которые я не могу обернуть вокруг.

Если вы наведите указатель мыши, КАК ЭТО РАБОТАЕТ (в то же время, конечно, 7), вы увидите две белые полосы по обе стороны страницы и подменю. Есть что-то (предположительно), вызывающее, что средний div, содержащий текст, действует как элемент блока. Я предполагаю, что это средний div. У меня полная потеря.

Если вы посмотрите на firefox, вы увидите, как это должно действовать.

Любая помощь будет оценена по достоинству.

Спасибо!

Answer 1

Казалось, что мне нужно было сделать почти все, что есть позиция: относительная, дисплей: встроенный, зум: 1 для обозревателя Internet Explorer IE7.

Ya знаю, когда GM производит плохой продукт, они отзываются. Почему Microsoft не будет отзываться на IE6 и 7?

Answer 2

Во-первых, ошибка JavaScript в Ffox:

"Error: browser is not defined 
Source file: http://www.buxback.com/wp-content/themes/buxback/js/fontreplace.js?ver=1.0 
Line: 1" 

Лучшее исправление, прежде, чем доверять любой браузер с каких-либо дальнейших переговоров!

В дальнейшем (о том, что эта страница медленно загружается и отвечает), я бы рекомендовал использовать абсолютное позиционирование для вложенных элементов и относительное позиционирование в родительском контейнере вложенных элементов. Это приведет к выходу меню из потока документа, а также позволит вам присвоить им свойства z-index - потому что ваше меню в настоящее время открыто ниже Flash-реклама для ИБП (правая сторона).

Опять же, меню этой страницы невероятно медленно реагирует на несколько браузеров, вам, возможно, потребуется выяснить, почему - возможно, у вас много слухов о событиях? Может быть, слишком много обработки во время события mouseover? Я думаю, что я видел символ «загрузка» на вкладке страницы IE7 всякий раз, когда я перебирал элемент меню, поэтому каждый процесс работы сервера происходит каждый раз.

Наконец, никогда не загрузить страницу в IE6: P

Answer 3

Итак, вот точный способ получить список по центру по горизонтали в IE7 (и всех других браузерах).

Демо-версия - http://jsfiddle.net/iamtyce/XH2A6/.

HTML

<div id="menu-outer"> 
    <div id="menu-table"> 
     <ul id="horizontal-list"> 
      <li><a href="#">First</a></li> 
      <li><a href="#">Second</a></li> 
      <li><a href="#">Third</a></li> 
      <li><a href="#">Fourth</a></li> 
     </ul> 
    </div> 
</div> 

CSS

div#menu-outer {} 

div#menu-outer div#menu-table { 
    display: table; /* Allow the centering to work */ 
    margin: 0 auto; 
    padding: 10px; 
} 

ul#horizontal-list { 
    margin: 0 4px; 
    padding: 0; 
    list-style: none; 
    text-align: center; 
} 

ul#horizontal-list li { 
    display: inline; 
    position: relative; 
    zoom: 1; 
} 

ul#horizontal-list li a { 
    text-decoration: none; 
    padding: 6px 10px; 
    color: #818181; 
    background: #f5f5f5;  
} 

ul#horizontal-list li a:hover { 
    color: #515151; 
    background: #e5e5e5; 
}