IE CSS字段集边框向右延伸得太远了：为什么？ [英] IE CSS Fieldset border extends too far to the right: Why?

问题描述

我已经用HTML定义了一个字段集，并对其应用了以下（简单的）CSS规则：

  fieldset 
 {
保证金：2em 0; 
头寸：相对； 
 padding：1em； 
 border：1px实心#ccc; 
} 
  

一切都很好，没什么大不了的，除了所有版本（好，到IE的7为止），该字段集的顶部边框（但不是有趣的是底部边框）在视觉上从右侧向右延伸了约25像素，超出了垂直边框在该侧的位置。 / p>

值得注意的是，例如，在Firebug中查看时，此元素的宽度导致其在其父元素的右侧宽度之外。

是什么原因导致IE中出现此问题？这是一个已知问题吗？如果可以，那么解决方法/ hack /解决方法是什么？

解决方案

我一直在努力这一段时间今晚我终于找到了答案。

http://www.sitepoint.com/forums/showthread.php?t=526881

引用NatalieMac：

似乎，如果您在字段集中有一个元素溢出了
，则它会扩展顶部边框。我将
容器设置为100％的宽度，没有填充或边距，IE7
认为由于某种原因而溢出（即使
内的内容是正确对齐且可见的在
字段集的边界内）。

我能够通过将overflow：hidden添加到字段集来解决此问题。

我可以确认这确实也为我解决了这个问题。

I have defined a fieldset in HTML, and applied the following (simple) CSS rules to it:

fieldset 
{
    margin: 2em 0;
    position:relative;
    padding: 1em;
    border:1px solid #ccc;
}

Everything is great, no big deal, except in all versions (well, up to 7 as far as I know) of IE the top border -- but not, interestingly, the bottom border -- of the fieldset visually extends too far to the right by about 25px, beyond where the vertical border is on that side.

It is worth noting that this element's width causes it to be outside its parent element width-wise to the right, when viewed in Firebug for example.

What is causing this problem in IE? Is this a known issue, and, if so, what is the fix / hack / workaround?

解决方案

I've struggled with this one for some time; tonight I finally found the answer.

http://www.sitepoint.com/forums/showthread.php?t=526881

To quote NatalieMac:

Seems that if you have an element inside the fieldset that's overflowing to the right of the fieldset, it extends the top border. I had a container set to a width of 100% with no padding or margins which IE7 thought was overflowing for some reason (even though the content inside this container was right-aligned and viewable within the border of the fieldset).

I was able to fix it just by adding overflow:hidden to the fieldset.

I can confirm that this does indeed fix the issue for me as well.

这篇关于IE CSS字段集边框向右延伸得太远了：为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！