0

我想知道，为什么 HTML select 标记的 padding-left 比 input 标记大，尽管两者都应用了相同的样式？

这可以在 Firefox 17、Chrome 23、IE 8 和 IE 9 中重现。只有 Opera 显示两个元素具有相同的 padding-left。

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

这是火狐的截图：

这是火狐的截图 .

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

<!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 中看起来不对齐。因此，我希望有另一种解决方案。

4

1 回答 1

-1

我还没有检查这个，但你可以尝试使line-heightininput和select高度相同（所以 30px）。

于 2012-12-05T19:52:22.410 回答