Это немного меня раздражает... Я работаю над сайтом и стараюсь, чтобы <ul>
отображался последовательно через Safari (v 7.0.1) и Firefox (v 25.0.1). Я упростил CSS и HTML как можно больше... по-прежнему существует разница в расстоянии между "названием задания" (тегом <a>
) и "местом" (<p>
), нескольких пикселей между двумя браузерами.
Fiddle находится по адресу: http://jsfiddle.net/7BZGU/7/
Здесь мой код - есть ли что-то очевидное, я делаю неправильно? Я понимаю, что браузеры отображают материал по-разному, но я не уверен, почему два современных браузера имеют такую разницу, когда имеют дело с симпатичным кодом ванили...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
<a href="#">Junior Risk Reporting Analyst</a>
<p>Chicago, IL</p>
</li>
<li>
<a href="#">Trading Data Analyst</a>
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
Я сделал пару вещей, которые помогли интервалу быть довольно близко!
Я удалил высоту линии из вашей ul: такая низкая высота линии создаст беспорядок текста после обтекания текста)
автоматически установите маркер абзаца, выполнив следующие действия:
margin: 10px 0px;
Я верю, что вы пытаетесь выровнять изображение пули, правильно? Для этого лучше всего использовать:
background-position: 0px 10px;
В любом случае это устраняет необходимость в высоте линии!
Это помогает, переопределяя исходные стили абзаца и настраивая их специально, поэтому он работает в нескольких браузерах.
Надеюсь это поможет!