修复在按钮元素内部使用浮动元素时的IE6 / 7问题 [英] Fixing IE6/7 problems when using floated elements inside of a button element

问题描述

我为两个链接和表单提交创建CSS按钮。

HTML示例：

 < button type =submit> 
< em>提交< / em> 
< em class =cap>< / em> 
< / button> 
 
< a class =button> 
< em>提交< / em> 
< em class =cap>< / em> 
< / a> 
  

CSS：

  .button，button {
 display：block; 
} 
按钮em，
 .button em {
 display：block; 
 float：left; 
 background：url（button.png）0 0; 
 height：30px; 
 padding：0 0 0 10px; 
} 
按钮em.cap，
 .button em.cap {
 padding：0; 
 width：10px; 
 background-position：100％0; 
} 
  

现在，在IE6 / 7中，锚点元素版本的工作原理。

我已经尝试过一些解决方案，我发现的按钮元素，但是使用按钮元素，没有我发现有一个案例很喜欢这个。我悬浮了两个元素的原因是因为我需要的按钮是透明的，所以其他方法不工作在这里。

这里有一个例子， 'm doing： cb> c> c $> em 。

最终固定版本： http://jsbin.com/omici3/5

请注意，只需使用 a 而不是按钮来处理。

I am creating CSS buttons for both links and form submissions. I use almost the same markup for both, with a different wrapper.

HTML Examples:

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

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

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

Now, in IE6/7, the anchor element version of this works. The problem comes in when using the button element, it causes the second em element to wrap.

I've tried some workarounds that I've found for button elements, but nothing I've found had a case quite like this. The reason I've floated the two elements left is because I need the button to be transparent, so other methods don't work here.

Here's an example of what I'm doing: http://keeleux.com/dev/button/

Any help is appreciated!

Thanks, Eric

解决方案

There's a big stack of issues to consider here.

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

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

• 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

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

• 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.

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

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

(screenshot from Firefox 4)

• 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

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

这篇关于修复在按钮元素内部使用浮动元素时的IE6 / 7问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！