在按钮元素内使用浮动元素时修复 IE6/7 问题

Question

我正在为链接和表单提交创建 CSS 按钮。我对两者使用几乎相同的标记，但包装器不同。

HTML 示例：

<button type="submit">
  <em>Submit</em>
  <em class="cap"></em>
</button>

<a class="button">
  <em>Submit</em>
  <em class="cap"></em>
</a>

CSS：

.button, button {
  display: block;
}
button em,
.button em {
  display: block;
  float: left;
  background: url(button.png) 0 0;
  height: 30px;
  padding: 0 0 0 10px;
}
button em.cap,
.button em.cap {
  padding: 0;
  width: 10px;
  background-position: 100% 0;
}

现在，在 IE6/7 中，锚元素版本可以正常工作。问题出现在使用 button 元素时，它会导致第二个 em 元素换行。

我已经尝试了一些我为按钮元素找到的解决方法，但我没有找到与这种情况非常相似的情况。我浮动左边两个元素的原因是因为我需要按钮是透明的，所以其他方法在这里不起作用。

这是我正在做的一个例子：http://keeleux.com/dev/button/

感谢任何帮助！

谢谢， 埃里克

Answer 1

这里有一大堆需要考虑。

我将非常详细地说明解决此问题所需的更改。

为了哄它在 IE6/7 中工作，我的步骤如下：

• 切换到使用display: inline-block 而不是 float 用于button 的内部结构。
  请参阅： http://jsbin.com/omici3/2
• 要修复不稳定的对齐方式，我们还需要添加 vertical-align: top。
  参见： http://jsbin.com/omici3/3
• 如果您在 IE7 中查看之前的演示，然后单击并按住按钮，您会发现它太宽了。我们可以使用overflow: visible（此处为：IE7 CSS padding issue - cannot figure out）和display: inline 来解决此问题。
  请参阅： http://jsbin.com/omici3/4

还有一些特定于 IE6 的低优先级问题：

• button:hover 选择器在 IE6 中不起作用。 IE6 仅在 a 元素上支持 :hover。要解决此问题，您可以使用 Whatever:hover 修复。
• 由于您使用.png 图像，在IE6 中有灰色背景而不是透明度；有可用的修复程序。虽然在这种情况下，很难注意到。我会说留下这个 - 额外的努力不值得改进。

更重要的是，您当前的实现在 Firefox 中略有损坏：

http://keeleux.com/dev/button/

（来自 Firefox 4 的屏幕截图）

• 请参阅此处了解原因：Revisiting the Firefox button line-height bug... any 2011 solutions?
• 在您的情况下，最简单的解决方法是将line-height 移动到内部ems。
  最终修复版本： http://jsbin.com/omici3/5

请注意，只需使用a 而不是button，就可以解决其中的一些问题。

Answer 2

@Eric，节省您自己的时间并使用已经在所有主要浏览器中经过测试和验证的解决方案......jQuery UI 按钮开箱即用。作为额外的奖励，它们可以使用 Themeroller 进行样式设置，以便在后端快速更换，甚至可以在前端使用用户可选择的主题。

查看this tut了解更多详情。