跨浏览器可调整大小按钮故障

Question

http://jsfiddle.net/KKL5G/

请查看上面的html和css按钮。

用于显示按钮右侧部分的跨度在这些浏览器上向下移动1px。在Firefox上按预期正常工作。

Windows：IE8，Opera，Safari Mac：FF，Safari，Opera，Chrome

更新1]在更改窗口高度时，即使在Firefox 11.0窗口中也可以看到该错误。

要重现它，请转到上面提到的jsfiddle链接并尝试调整结果框架的大小..你可能会看到跨度闪烁... [编辑2：其实我正在调整windows firefox中的firebug面板，当我注意到按钮右侧的跳跃跨度时，之前我认为它在firefox中工作正常。]

我也尝试了一个全内联元素示例。 http://jsfiddle.net/sbWCD/

P.S。这个简单的图像只是一个更复杂设计的占位符，我不是在寻找CSS3解决方案..

Answer 1

您的代码对于您想要实现的目标而言过于复杂。 这是一个已清理的版本http://jsfiddle.net/KKL5G/4/ 它应该跨浏览器工作。

使用border-radius，可以轻松制作带圆角的方框，无需背景图片。

Answer 2

嗯我调整了高度的垂直填充，总高度达到了32px，并且在示例中使用span将span-l的行高改为33px，现在它似乎在firefox和safari中工作。

http://jsfiddle.net/sbWCD/3/

有效，但仍然不知道导致问题的原因。