为什么下拉菜单中的文本高于相邻div中的文本？

Question

使用Blueprint CSS，我在页面上创建了一个标题行。

我不明白为什么行中的下拉菜单略高于其左侧div中的文本（The quick brown fox jumped over the lazy dog）。

如果我将prepend-top类添加到下拉列表中，则下拉列表会略低于相邻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中看到的那样，下拉列表的字体比页面上其他文本的字体大得多。

Answer 1

当您使用简写Font属性并且不使用某些值时，这些值不会被继承，它们会重置为“初始值”。

因此，在您的示例中，因为您没有在后代中定义行高，所以它被重置 - 它没有继承18px。

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

由于某些浏览器使用本机系统小部件来处理表单元素，因此您排队的Select元素可能会有一些额外的问题，这可能会更复杂一些，因为某些浏览器使用本机系统小部件来表单元素。