使用ng-options在角度下使用下拉菜单()时,我意识到了这个错误。在某些情况下,Firefox不会渲染下拉菜单的下边框,几乎就像它会刮掉底部的几个像素。如果页面上有很多菜单,它几乎就形成了一个模式(ABABAB | A =正确,B =不正确)。根据字体大小和浏览器缩放级别,它看起来很挑剔。
我首先认为这是一个有角度的问题,但它似乎更像是一个浏览器渲染/ CSS问题。我发现了类似的错误报告,但它们已经过时了: https://bugzilla.mozilla.org/show_bug.cgi?id=311770
在我正在处理的东西中,font-size是8pt,它发生在默认的缩放级别。我能够使用angular的angular-phonecat重现它,在我的情况下,它的字体大小为8pt,缩放级别为1.(如果你想引用phonecat,我做的唯一改变是在css中,我将选择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>
经过进一步调查后,我发现我能够通过插入一个带有不间断空格的选项来修复它,这个空格强制默认空值与其他空格值相同,就像下面我用来重现它的代码片段一样在angular-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=""> </option>
</select>
</td>
</tr>
</table>
为方便访问,这里有一个小提琴:http://jsfiddle.net/f3mzm/ 对我来说,在1920x1080,下拉菜单组没有底边框,但是将浏览器窗口重新调整为特定尺寸。
踢球者是这样的:我已经提到如果我让第一个选项成为一个不间断的空间,但是如果我将font-size更改为8pt以外的其他选项,那么它也能正常工作。后者不是我正在研究的选项而前者是不利的,但似乎需要作为一种解决方法。这确实是一个浏览器问题,就像有关浏览器的其他边界问题一样,或者我只是疯了吗?