Различия в высоте линий между Firefox и Safari

0

Это немного меня раздражает... Я работаю над сайтом и стараюсь, чтобы <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;
}
Теги:
firefox
safari
cross-browser

1 ответ

0

Я сделал пару вещей, которые помогли интервалу быть довольно близко!

  1. Я удалил высоту линии из вашей ul: такая низкая высота линии создаст беспорядок текста после обтекания текста)

  2. автоматически установите маркер абзаца, выполнив следующие действия:

    margin: 10px 0px;

  3. Я верю, что вы пытаетесь выровнять изображение пули, правильно? Для этого лучше всего использовать:

    background-position: 0px 10px;

В любом случае это устраняет необходимость в высоте линии!

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

Надеюсь это поможет!

  • 0
    Спасибо за ответ, но я должен был упомянуть в своем вопросе, что мне нужно, чтобы эта высота линии была установлена таким образом. Я использую нестандартные маркеры для элементов <li>, и без этой высоты строки текст тега <a> не совпадает с маркером. Я пробовал другие исправления (например, отрицательное верхнее поле на <a>), но не могу выровнять их без настройки высоты строки ...
  • 0
    Может быть, включить эти пули, чтобы я мог попытаться найти лучшее решение для вас? Помогла ли разница?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню