Различия между IE7 и Firefox / Opera / Chrome - PullRequest
Новая
       8

Различия между IE7 и Firefox / Opera / Chrome

3 голосов
/ 01 апреля 2010

У меня есть постоянная проблема с количеством вертикальных пространств неупорядоченных списков в IE7 по сравнению с Firefox / Chrome / Opera, и я не могу найти решение там.

В IE7 места меньше, и что бы я хотел увидеть.

В Firefox, Chrome и Opera расстояние между ними примерно вдвое больше.

Я не могу объяснить любые пробелы в коде или странице. На моей странице код выглядит так: 

<!--BEGIN SIDEBOX-->
<div id="sidebox_new">
<div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>
<div id="sidebox_bod">
<br />
<ul>
<li><a href="training.aspx">User Training</a></li><br /><br />
<li><a href="faqs.aspx">FAQ</a></li><br /><br />
<li><a href="logonasst.aspx">Logon Assist. Center</a></li><br /><br />
<li><a href="faxus.aspx">Fax Us</a></li><br /><br />
<li><a href="callus.aspx">Call Us</a></li><br /><br />
<li><a href="feedback.aspx">General Feedback</a></li>
</ul>
</div>
<div id="sidebox_btm"></div>
</div>
<!--END SIDEBOX-->

Мой CSS для этого раздела выглядит так: 

#sidebox_bod
{
width: 200px;
margin: 0 30px 0 0;
padding: 0;
background: url('../img/supbxbod.gif');
background-repeat:repeat-y;
background-position:bottom;
}

#sidebox_bod ul
{
list-style-image:url('../triangle.gif'); 
text-align:left;
padding: 0 0 0 30px;
margin: 0;
}

#sidebox_bod ul li a
{
font-size: 13px;
}

Есть идеи, что я могу сделать, чтобы обеспечить одинаковое расстояние по вертикали во всех браузерах? Я бы предпочел, чтобы IE7 посмотрел, чтобы попытаться это исправить. Спасибо.

Ответы [ 2 ]

7 голосов
/ 01 апреля 2010

Проблема, с которой вы столкнулись сейчас, связана с тем, что каждый пользовательский агент (браузер) имеет свои собственные стили по умолчанию, которые могут отличаться друг от друга.

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

В этом конкретном случае игра с margin, padding и line-height из #sidebox_bod ul li решит вашу проблему: 

#sidebox_bod ul { margin: 0; padding: 0 16px; line-height: 1em; }

Я бы порекомендовал использовать Reset CSS, поскольку это решит большинство этих проблем для всех элементов.

0 голосов
/ 01 апреля 2010

Использование тегов разрыва между элементами списка не очень хорошая идея. Вы должны установить конкретные поля, отступы и / или стили высоты строки для вашего интервала между элементами списка - иначе это будет непредсказуемо.

Я бы рекомендовал не использовать 'ems' для измерения, если вам нужна точная симметрия, поскольку они отображаются очень по-разному в разных браузерах и операционных системах.

Есть также некоторые проблемы с пробелами в IE, но обычно это приводит к большему пробелу, чем меньшему ...

Что касается комментария вышеупомянутого автора о сбросе таблиц стилей - я думаю, что было бы лучше в этом случае установить конкретный стиль для вашего собственного сайта. Сброс таблиц стилей может стать ненужным / избыточным, если вы вообще стилизуете свой сайт (ref: http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)

Ссылка на ваш сайт была бы великолепной, так как ее очень трудно отладить, не видя весь CSS-файл и HTML-контекст.

...