Question

采用以下示例： -

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style>
        * {margin: 0; padding: 0;}
    </style>
</head>
<body>
    <select id="TestDropdown">
        <option value="Short" selected>Short</option>
        <option value="Long">A long description</option>
    </select>
</body>
</html>

如果您在 Firefox 中运行此功能，当您在下拉列表中选择其他选项时，选择输入的大小会发生变化。

我已经发现这是*的填充0正在这样做。但是，如果我将填充更改为select元素而不是*，则下拉列表的大小正确。所以它必须是其他东西*正在应用填充。

有什么想法吗？

JSFiddle：http://jsfiddle.net/LaDsh/

我当然可以将*更改为标签列表，问题将被删除，但很想知道导致问题的标签。

Answer 1

自己想一想。查看Firefox的forms.css文件，我看到有一个样式： -

select > option {
  padding-top : 0;
  padding-bottom: 0;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}

因此，如果我包含此问题，问题就解决了。

Firefox下拉列表调整大小问题

1 个答案: