Chrome无法显示空锚标记

Question

问题： 当锚标记位于跨度内并且跨度内的文本与锚标记之间存在空白字符时，Chrome似乎无法使用左边距和背景颜色可见地呈现空锚标记。

如果从span的文本和嵌套的锚标记之间删除了空格，则锚标记将按预期呈现。此

这似乎只影响铬。我已经在IE和FF中确认了标记渲染，但还没有尝试过Safari。

标记：

<span id="container1">asd <a></a></span>
<br/>
<span id="container2">asd<a></a></span>

样式：

#container1 a, #container2 a{
    padding-left:17px;
    background-color:red;
    cursor:pointer;
}

小提琴： http://jsfiddle.net/98ezf/1/

标记是由向下翻页生成的。

如何强制chrome渲染嵌套在＃container1中的锚标记？

Answer 1

inline元素无法填充。默认情况下，a为display: inline。将其更改为inline-block。您还需要指定一个高度，或者它将0px高，即：隐形。

#container1 a, #container2 a{
    padding-left:17px;
    background-color:red;
    cursor:pointer;
    display: inline-block;
    height: 1em; /* or whatever */
}

这里是sample fiddle。