为什么 webkit (Chrome/Safari) 对这个元素表现出不稳定的关注？

Question

我创建了一个自定义 HTML 组合框。除了 Webkit 浏览器（Chrome 和 Safari）使焦点突出显示不稳定之外，一切都运行良好。这是它在 Chrome 和 Safari 上的样子：

注意下拉图像底部突出的焦点边框。

这在 IE 和 Firefox 中是一样的：

如您所见，IE 和 Firefox 都使用漂亮的矩形来渲染焦点，但 Chrome 渲染它的效果很差。

这是相关的 HTML：

<div style="height:32px;" class="ko-select-container" tabindex=0>
    <div class="selected-option">
        <span>Select a Value</span>
    </div>
    <div style="float:right;">
        <!-- Drop down image height is 32px !-->
        <img src="DropDown.png" />
    </div>
    <div style="clear:both" />
</div>

Answer 1

尝试将vertical-align: top 添加到img。这个差距看起来很像usual problem。