Html 修复在按钮元素内部使用浮动元素时出现的IE6/7问题

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

HTML示例：

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

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

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

我已经尝试了一些我为按钮元素找到的解决方法，但是我发现没有一个是这样的。我之所以将这两个元素放在左边，是因为我需要按钮是透明的，所以其他方法在这里不起作用

下面是我正在做的一个例子：

感谢您的帮助

谢谢，

---

Eric

@Eric，节省您自己的时间，使用一个已经在所有主流浏览器中使用、测试和验证过的解决方案……jQuery UI按钮可以立即实现这一点。作为额外的奖励，它们可以与Themeroller一起设计，以便在后端快速切换，甚至在前端可以由用户选择主题

查看更多细节。

这里有大量问题需要考虑。

我将非常详细地介绍修复此问题所需的更改

为了诱使它使用IE6/7，我采取了以下步骤：

切换到使用显示：内联块而不是按钮内部的浮动。 见： 要修复不稳定的对齐方式，我们还需要添加垂直对齐：top。 见： 如果您查看IE7中的上一个演示，并点击并按住按钮，您会发现它太宽了。我们可以用overflow:visible作为here:，display:inline来解决这个问题。 见： 还有一些IE6特定的低优先级问题：

按钮：悬停选择器在IE6中不起作用。IE6仅支持：悬停在元素上。要解决此问题，可以使用修复程序。 由于使用了.png图像，IE6中的背景是灰色而不是透明的；有可用的修复程序。虽然在这种情况下，很难注意到。我要说的是，别管这个了——额外的努力不值得改进。 更重要的是，您当前在Firefox中的实现略有中断：

Firefox4的屏幕截图

请参见此处了解原因： 在您的情况下，解决此问题的最简单方法是将线路高度移动到内部ems。 最终固定版本：

---

请注意，这些问题中有相当一部分可以通过简单地使用a而不是按钮来解决。

太多人似乎忽视了jqui的模板功能+1我之所以没有使用此解决方案，是因为我的按钮的性质。您的示例依赖于边界半径来生成圆角，除非使用CSS3，否则无法生成阴影。这两个都是不可接受的，因为这里的全部问题是我的按钮在IE6/7中不起作用。如果不清楚我在做什么，你可以在这里看到一个例子：。另外，你的例子在IE7中被破坏了，我甚至都没有检查IE6。截图：非常感谢！您提到的低优先级IE6问题我并不真正关心，如果需要，我知道其他解决方法。真的，这只是一个按钮包装的问题，你已经修复漂亮！同样感谢Firefox的注释，我没有意识到这一点。顺便说一下，我不愿意使用锚元素而不是按钮的原因是按钮类型=提交将导致表单行为保持不变。如果我删除submit按钮而选择单击时提交的锚定标记，那么在某些浏览器上，您将失去输入提交的功能，这需要更多的javascript解决方案。再次感谢你！这在我正在开发的一个新网站上是一个大问题。我明白了，这是有道理的。优雅的降级可能是一个重要的考虑因素。

.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;
}