html - ドロップダウンの境界線に関する Firefox のバグ? 場合によっては、下の境界線がレンダリングされない

Question

ng-options を使用して angular でドロップダウン メニュー () を操作しているときに、このバグに気付きました。場合によっては、Firefox がドロップダウン メニューの下の境界線をレンダリングしないことがあります。ページに多くのメニューがある場合、ほぼパターン (ABABAB | A = 正解、B = 不正解) を形成しているように見えました。フォントサイズとブラウザのズームレベルに基づいて、気難しいように見えました。

最初は角度の問題だと思っていましたが、ブラウザのレンダリング/cssの問題のようでした。同様のバグ レポートを見つけましたが、日付は次のとおりです: https://bugzilla.mozilla.org/show_bug.cgi?id=311770

私が取り組んでいるものでは、フォントサイズは 8pt で、デフォルトのズームレベルで発生します。angular の angular-phonecat を使用して再現できました。私の場合は、font-size 8pt、ズーム レベル 1 で発生します。 select font-size のスタイルシートを 8pt に変更し、以下を追加してドロップダウンを作成しました)。

<!-- Generates multiple populated dropdowns easily -->
<table>
    <tr ng-repeat="phone in phones">
        <td>
            <select ng-model = "phones" ng-options="phone.id for phones in phones">
            </select>

        </td>
    </tr>
</table>

以下は、間違ったものと正しいものの例です。

また、ng-options を使用せずにこの問題を再現しました。同じ場合、次のコードを複数回繰り返すと同じ問題が発生します。

<select>
        <option value=""></option>  <!-- mimics default value produced by ng-options -->
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
        <option value="">A</option>
    </select>

さらに調査した結果、角度で再現するために使用した次のコードスニペットのように、デフォルトの空の値を他の値と同じ高さに強制する改行なしのスペースを含むオプションを挿入することで、修正できることがわかりました- phonecat (ただし、一部が正常にレンダリングされ、一部が正常にレンダリングされなかった理由は説明できません):

<!-- Generates multiple populated dropdowns easily -->
<table>
    <tr ng-repeat="phone in phones">
        <td>
            <select ng-model = "phones" ng-options="phone.id for phones in phones">
            <option value="">&nbsp;</option>
            </select>

        </td>
    </tr>
</table>

簡単にアクセスできるように、ここにフィドルがあります：http: //jsfiddle.net/f3mzm/ 私にとって、1920x1080では、ドロップダウンメニューのグループには下枠がありませんが、ブラウザーウィンドウのサイズを特定のサイズに変更すると、それらがあります.

キッカーはこれです: 最初のオプションを改行なしのスペースにすると機能することは既に述べましたが、font-size を 8pt 以外に変更しても問題なく機能します。後者は私が取り組んでいるオプションではなく、前者は好ましくありませんが、回避策として必要なようです。これは、ブラウザについて報告されている他の国境の問題と同様に、ブラウザの問題なのか、それとも私が気が狂っているだけなのでしょうか?