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

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

查看this tut了解详情。

Answer 2

这里有一个大堆问题需要考虑。

我将对修复此问题所需的更改非常详细。

为了让它在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仅支持:hover元素上的a。要解决此问题，您可以使用Whatever:hover修复。
由于您使用了.png图片，因此在IE6中有灰色背景而不是透明度;有修复可用。虽然在这种情况下，很难注意到。我会说离开这个 - 额外的努力不值得改进。

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

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

（来自Firefox 4的截图）

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

请注意，只需使用a代替button即可解决其中的一小部分问题。

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

2 个答案: