Странные проблемы с пробелами - IE8 отлично работает, IE6 и IE7 кусаются

Question

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

Answer 1

Я использовал Панель инструментов разработчика Internet Explorer в 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, Opera 9.6 и 10, Safari для Windows 3 & 4 и Google Chrome. Казалось, все в порядке. Вы захотите выполнить более глубокое тестирование, чтобы убедиться, что оно не оказывает негативного влияния на другой макет.

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

#cartComputer LI.subType {
    display: inline;
}

Answer 2

У меня больше нет 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 3

Брианреавис находится на правильном пути. Скорее всего, это проблема 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;
}

Answer 4

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

Answer 5

Не ответ, но попробуйте в 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 - хороший ресурс для решения проблем такого типа, если отладка является проблемой.