html - 在选择框中放置填充并使用 font-family segoe 时，它​​仅在 chrome 中剪切文本

Question

大家好。我在使用font-family:segoe. 我有一个select dropdown，并且在select我申请padding时，css它会从底部剪切文本，请参见下图

这是在 Mozilla 中：

这是在 Chrome 中查找：

你可以看到两张图片中的差异我该如何解决这个问题请帮助我并检查这个小提琴http://jsfiddle.net/sarfarazdesigner/GqQdU/

或 检查此代码：

HTML

<select name="select" id="select" class="selinpt">
    <option value="Promotional/Marketing">Promotional/Marketing</option>
    <option value="Tips and Alert">Tips and Alert</option>
    <option value="Information to registered users">Information to registered users</option>
    <option value="Varification process">Verification process</option>
    <option value="Important notice">Important notice</option>
    <option value="API Integration">API Integration</option>
    <option value="Other">Other</option>
</select>

CSS

.selinpt {
    color: #858585;
    height: 30px;
    padding: 5px 10px;
    width: 404px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
body, input, textarea, select {
    color: #333333;
    font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
    font-size: 14px;
}

请帮我。我被困在这个任何形式的帮助将不胜感激谢谢:-)

Answer 1

.selinpt {
    color: #858585;
    height: 30px;
    /*padding: 5px 10px;*/
    margin:5px 10px;
    width: 404px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

将填充更改为边距，如上，在 IE、Firefox 和 Chrome 中测试。