Weird spacing issues - IE8 отлично работает, IE6 и IE7 bite

Question

Оформить заказ http://new.reyniersaudio.com/index.php?task=browse&view=model&modelId=17, и если вы заметите, что на IE8, Firefox, Chrome и Opera правая боковая панель показывает правильный интервал. В IE6 и IE7 он слишком разнесен. Что у меня в моем CSS, что делает это.

Answer 1

Я использовал Internet Explorer Developer Toolbar в IE 6, чтобы определить, что вопрос разнос начал на <li class="subType subType##" окружающих каждый часть (внутри <ul class="partType partType##">).

Когда я использовал панель инструментов разработчика, чтобы изменить стиль, чтобы быть display: inline дополнительные вертикальное расстояние между ними ушли в IE 6.

Я изменил cartSideBar.css и переопределен:

#cartComputer LI { 
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    PADDING-TOP: 0px; 
    LIST-STYLE-TYPE: none; 
} 

как:

#cartComputer LI { 
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    PADDING-TOP: 0px; 
    LIST-STYLE-TYPE: none; 
    DISPLAY: inline; 
} 

Я проверил результат в IE 6, 7 & 8, Firefox 2, 3 & 3.5, 9.6 опера & 10, Safari для Windows 3 & 4 и Google Chrome. Казалось, все в порядке. Вы захотите выполнить более глубокое тестирование, чтобы убедиться, что это не оказывает негативного влияния на другой макет.

Вы можете изолировать изменения просто subType класса просто чтобы убедиться, что это не влияет на другие элементы li под #cartComputer:

#cartComputer LI.subType { 
    display: inline; 
} 

Answer 2

Не ответ, но дать этому попытку в вашем IE 6 и/или 7. http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

Это может быть в состоянии помочь вам диагностировать проблему. Я предполагаю, что эти версии IE не подбирают ваши изменения в полях/дополнениях (стили «H6» и «#cartComputer H6» в «table.css» и «cartSideBar.css».)

И Quirksmode является хорошим ресурсом для этого типа проблем, если отладка - это боль.

Answer 3

Я не уверен, что это поможет, но убедитесь, что все ваши открытые теги html имеют закрывающий тег.

Answer 4

У меня нет IE6 на любой из моих компьютеров больше (слава богу), но одна вещь, чтобы попытаться это:

Удалить все пробелы (пробелы, табуляции, новой строки) между элементами вокруг вашей проблемной области , IE6 (и IE7, я считаю) любит принимать это пробелы --- должно быть хорошо, чтобы иметь там --- и продуть макет все к черту с ним.

<div>I should be fine, but I'm not in IE</div> 
<div>I should be fine, but I'm not in IE</div> 

"фиксированной" версии IE6:

<div>I am now fine in IE</div><div>I am now fine in IE</div> 

Answer 5

brianreavis находится на правильном пути. Скорее всего, это проблема «hasLayout», в которой вы будете постоянно работать в IE6. Это отличный ресурс по ошибке: http://www.satzansatz.de/cssd/onhavinglayout.html

Если вы не можете или не хотите размещать весь свой код на одной строке, существует несколько возможных исправлений CSS. Моим фаворитом является добавление увеличения. Добавьте его в свой CSS здесь ...

#cartComputer li { 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
margin:0; 
padding:0; 
zoom: 1; 
}