且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-25 09:45:28

有一个大筹码的问题的考虑这里。

我要非常详细与所需的变革来解决这个问题。

I'm going to be very verbose with the changes required to fix this.

要哄着它变成在IE6 / 7的工作,这些都是我的步骤:

To cajole it into working in IE6/7, these were my steps:


  • 切换到使用显示:inline-block的代替的浮动的内部在按钮。结果
    查看: http://jsbin.com/omici3/2

  • 要解决这个靠不住的调整,我们还需要添加垂直对齐:顶部结果。
    查看: http://jsbin.com/omici3/3

  • 如果你看一下在IE7的previous演示,点击并按住该按钮,就可以看到它的太宽。我们可以修复与溢出:可见(按这里:IE7 CSS填充问题 - 无法弄清楚)和显示:内联结果。
    查看: http://jsbin.com/omici3/4

  • Switch to using display: inline-block instead of float for the internals of the button.
    See: http://jsbin.com/omici3/2
  • To fix the wonky alignment, we need to also add vertical-align: top.
    See: http://jsbin.com/omici3/3
  • If you look at that previous demo in IE7, and click and hold the button, you can see it's too wide. We can fix that with overflow: visible (as per here: IE7 CSS padding issue - cannot figure out), and display: inline.
    See: http://jsbin.com/omici3/4

还有一些IE6低优先级的具体问题:

There's also some IE6 specific issues of low priority:


  • 按钮:悬停选择不会在IE6工作。 IE6只支持:悬停 A 元素。要解决这个问题,你可以使用无论在:hover 修复

  • 由于您使用巴纽的形象,在IE6中存在一个灰色的背景,而不是透明度;有可用的修复程序。虽然在这种情况下,很难以通知。我想说离开这个是 - 额外的努力是不值得的改进

  • The button:hover selector will not work in IE6. IE6 only supports :hover on a elements. To work around this, you can use the Whatever:hover fix.
  • Due to your use of a .png image, in IE6 there is a grey background instead of transparency; there are fixes available. Though in this case, it's hard to notice. I'd say leave this one be - the extra effort is not worth the improvement.

更重要的是,当前的实现是在Firefox略微沙哑的:

More important is the fact that your current implementation is slightly broken in Firefox:

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

使用按钮元素中的浮动元素时修复IE6 / 7问题(截图从Firefox 4)


  • 看到这里的原因:Revisiting Firefox按钮行高的bug ...任何解决方案,2011?

  • 要解决它在你的情况下,它只需移动的最简单的方法行高的内部 EM 秒。结果
    最终修正版本: http://jsbin.com/omici3/5

  • See here for why: Revisiting the Firefox button line-height bug... any 2011 solutions?
  • The easiest way to workaround it in your case it to simply move the line-height to the internal ems.
    The final fixed version: http://jsbin.com/omici3/5

需要注意的是一个公平的几个这些问题可以通过简单地利用周围工作的 A ,而不是按钮

Note that a fair few of those issues can be worked around by simply using an a instead of a button.