1

在使用 ng-options 以角度处理下拉菜单 () 时，我意识到了这个错误。在某些情况下，Firefox 不会渲染下拉菜单的底部边框，就像它在底部剃掉几个像素一样。如果页面上有很多菜单，它几乎似乎形成了一个模式（ABABAB | A = 正确，B = 不正确）。基于字体大小和浏览器缩放级别，它似乎很挑剔。

我最初认为这是 angular 的问题，但它似乎更像是浏览器渲染/css 问题。我发现了类似的错误报告，但它们已过时： https ://bugzilla.mozilla.org/show_bug.cgi?id=311770

在我正在处理的东西中，字体大小为 8pt，它发生在默认缩放级别上。我能够使用 angular 的 angular-phonecat 重现它，在我的情况下，它的字体大小为 8pt，缩放级别为 1。（如果你想引用 phonecat，我所做的唯一更改是在 css 中，我将选择字体大小的样式表更改为 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 上，下拉菜单组没有底部边框，但是将浏览器窗口重新调整到某些大小有它们. JSfiddle 中的问题

关键是：我已经提到，如果我将第一个选项设为不间断空格，它会起作用，但如果我将字体大小更改为 8pt 以外的值，它也可以正常工作。后者不是我正在研究的选项，而前者是不利的，但似乎需要它作为一种解决方法。这确实是浏览器问题，就像已报告的有关浏览器的其他边框问题一样，还是我疯了？

4

0 回答 0