Firefox下拉边框错误?在某些情况下,底部边框无法渲染

时间:2013-10-01 19:05:27

标签: html css firefox

使用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>

下面是一个不正确的例子和一个正确的例子。 Bugged view vs correct one

我也在不使用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="">&nbsp;</option>
            </select>

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

为方便访问,这里有一个小提琴:http://jsfiddle.net/f3mzm/ 对我来说,在1920x1080,下拉菜单组没有底边框,但是将浏览器窗口重新调整为特定尺寸。 Issue in JSfiddle

踢球者是这样的:我已经提到如果我让第一个选项成为一个不间断的空间,但是如果我将font-size更改为8pt以外的其他选项,那么它也能正常工作。后者不是我正在研究的选项而前者是不利的,但似乎需要作为一种解决方法。这确实是一个浏览器问题,就像有关浏览器的其他边界问题一样,或者我只是疯了吗?

0 个答案:

没有答案