Почему текст в раскрывающемся меню выше, чем текст в соседнем div? - PullRequest
Новая
       4

Почему текст в раскрывающемся меню выше, чем текст в соседнем div?

0 голосов
/ 26 ноября 2010

Используя Blueprint CSS, я создал строку заголовка на своей странице.

Чего я не понимаю, так это того, почему выпадающее меню появляется немного выше в строке, чем текст в div слева от него.(The quick brown fox jumped over the lazy dog).

Если я добавлю класс prepend-top в выпадающий элемент div, выпадающий список будет немного ниже, чем текст в соседнем элементе div (The quick brown fox jumped over the lazy dog).

Как заставить текст обоих элементов отображаться на одном горизонтальном уровне в строке? 

    <div class="span-24 last">

        <div class="span-21">The quick brown fox jumped over the lazy dog</div>

        <div class="span-3 last">
            <select name="test" id="test">
                <option id="test1" value="test1" selected>test1</option>
                <option id="test2" value="test2" selected>test2</option>
                <option id="test3" value="test3" selected>test3</option>
            </select>
        </div>
    </div>

CSS: 

body
{
    font:12px/18px 'Times New Roman',Times,serif;

}

#test
{
    font: 170% 'Times New Roman',Times,serif;
}

Как видно из CSS, шрифт для раскрывающегося списка значительно больше, чем шрифт для остального текста на странице.

1 Ответ

1 голос
/ 26 ноября 2010

Когда вы используете сокращенное свойство Font и пропускаете некоторые значения, эти значения не наследуются, они сбрасываются до своего «начального значения».

Так в вашем примере, потому что вы не сделалиt определить высоту строки в вашем потомке, она была сброшена - она ​​не наследовала 18px.

http://www.w3.org/TR/CSS2/fonts.html#font-shorthand

Вероятно, это также немного усложняется тем, что вы выравниваетевверх элемента Select, который может иметь некоторые дополнительные проблемы в зависимости от того, какой браузер и платформу вы просматриваете, потому что некоторые браузеры используют собственные системные виджеты для элементов формы.

...