Question

我想知道为什么HTML select标签的左边有一个比输入标签更大的填充，虽然它们都应用了相同的样式？

这可以在Firefox 17，Chrome 23，IE 8和IE 9中重现。只有Opera显示两个元素具有相同的填充左侧。

使用重置样式表时出现同样的问题。输入和选择的边距和填充为0且没有边框，使用box-sizing：border-box。

这是Firefox的截图：

Here is a screenshot of Firefox

代码示例（没有表单操作等）：

<!doctype html>
<html>
<head>
    <title>input and select - padding-left</title>
    <style>
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box; 
    }

    input, select {
        width: 150px;
        padding: 0;
        margin: 0;
        border: none;
        height: 30px;
        font-size: 16px;
    }



    body {
        background-color: #007;
        font-size: 36px;
    }

    div {
        margin-left: auto;
        margin-right: auto;
        width: 140px;
    }
    </style>
</head>
<body>
    <form>
        <div>
            <input value="Hello input" /><br/>
            <select size="1">
                <option>Hello select</option>
            </select>
        </div>
    </form>
</body>

因为Opera会根据需要显示所有内容，如果我为padding-left分配不同的值，它在Opera中看起来会不对齐。因此，我希望有另一种解决方案。

Answer 1

我没有选中此项，但您可以尝试将line-height和input中的select设置为与高度相同（30 px）。

在相同样式的输入和选择元素上留下不同的填充

1 个答案: