Разница между IE7 и Firefox/Opera/Chrome

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

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

Ссылка на ваш сайт будет замечательной, поскольку ее очень сложно отладить, не увидев весь CSS-файл и html-контекст.