为什么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。