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

请看一下上面的html和css按钮

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

Windows:IE8、Opera、Safari Mac:FF、Safari、Opera、Chrome

更新1]更改窗口高度时，即使在Firefox 11.0窗口中也会随机出现该漏洞

要复制它，请转到上面提到的JSFIDLE链接，并尝试调整结果帧的大小。。你可能会看到跨度在闪烁。。。 [编辑2：事实上，我当时正在调整windows firefox中firebug面板的大小，这时我注意到按钮右侧的跳跃范围，早些时候我认为它在firefox中工作正常。]

我还尝试了一个全内联元素的示例。

---

另外，这个简单的图像只是一些更复杂设计的占位符，我不想寻找CSS3解决方案。

您的代码太复杂了，无法实现您想要的效果。 这是一个清理过的版本 它应该可以跨浏览器工作

---

使用

边框半径

，可以很容易地制作圆角框，并且不需要背景图像。

Hmm我调整了的垂直填充，使总高度达到32px，并在使用span的示例中将span.l上的线条高度更改为33px，现在似乎在firefox和safari中工作

---

工作正常，但仍然不知道是什么导致了问题。

在Ubuntu上的Firefox11中向下移动1px。稍后将研究解决方案。为什么要将按钮拆分为两个元素？为什么不为较新的浏览器使用带有圆角的

背景色：

？你把问题复杂化了，并且引入了新的问题。@jamwaffles圆角是一个要求。此外，您还忘记了旧浏览器不支持css3边界半径。css3无法重现图像可以重现的复杂设计或模式。我非常清楚，旧浏览器不支持css3，因此我的“新浏览器的圆角”。不支持旧浏览器不会影响网站的可用性，在这种情况下，网站的设计也不会有什么影响。纯色背景色不是一种复杂的设计，除非您在示例中将其用作更复杂内容的占位符，在这种情况下，您应该这样说。很抱歉，背景图像是一项要求，我计划稍后更改图像，css替代是不可能的。。