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

我正在为链接和表单提交创建CSS按钮。我用两个几乎相同的标记，用不同的包装。修复IE6/7使用按钮元素内的浮动元素时的问题

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，这个锚元素版本的作品。问题出现在使用按钮元素时，它会导致第二个em元素换行。

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

下面是我在做什么的例子：http://keeleux.com/dev/button/

任何帮助表示赞赏！

感谢，埃里克

来源

2011-05-04 Eric Roberts

有一个大堆栈的问题在这里考虑。

我将非常详细地解决这个问题。

哄着它变成在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?
最简单的工作方式nd它在你的情况下只是将line-height移动到内部em s。
最终修正版本：http://jsbin.com/omici3/5

需要注意的是一个公平的几个这些问题可以通过简单地使用a而不是button的周围工作。

来源

2011-05-04 16:00:15 thirtydot

非常感谢！您提到的低优先级IE6问题我并没有真正担心，如果需要，我知道其他解决方法。真的，它只是你固定的按钮环绕问题！也感谢Firefox说明，我不知道这一点。 – 2011-05-06 11:00:21

顺便说一句，我不愿意使用锚元素而不是按钮的原因是按钮类型=“提交”将导致形式行为保持不变。如果我删除了提交按钮，以支持单击时提交的定位标记，则在某些浏览器上会丢失“输入并提交”，这就需要更多的javascript解决方法。再次感谢！这是我正在处理的新网站中的一个大问题。 – 2011-05-06 12:25:31

我明白了，这很有道理。优雅的退化可能是一个重要的考虑因素。 – thirtydot 2011-05-06 12:30:54

@Eric，节省自己的时间，并与已经被打与和测试和验证在所有主要浏览器的解决方案去..... jQuery UI的按钮，这是否正确出来盒子。作为额外的奖励，他们可以使用Themeroller进行样式化，以便在后端快速更换，甚至可以在前端使用用户可选的主题。

查看this tut了解更多详情。

来源

2011-05-04 14:37:04 bpeterson76

太多人似乎忽略了jqui的模板功能。 +1 – HurnsMobile 2011-05-04 14:42:13

我没有用这个解决方案的原因是由于我的按钮的性质。你的例子依赖于边界半径有圆角，并且除非用CSS3完成，否则将不能有阴影。这两个都是不可接受的，因为这里的问题是我的按钮在IE6/7中不起作用。如果你不清楚我在做什么，你可以在这里看到一个例子：http://keeleux.com/dev/button/。另外，你的例子在IE7中被破解了（我甚至不打扰6）。这里截图：http://keeleux.com/dev/button/example.png – 2011-05-04 14:52:39

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

回答

相关问题