Question

我似乎无法让IE9呈现带圆角的字段集，而其他浏览器则可以。有没有人遇到过这个？

Answer 1

仅当您将<fieldset>与<legend>一起使用时才会发生这种情况 - 如果没有角落渲染正常。

您可以通过将display:inline或display:inline-block应用到<legend>元素来修复此错误，但您必须通过设置position:relative并移动它来重新定位它周围。

根据图例的样式（如果背景看起来相同 - 没有背景，字段集的边框仍会在字母后面可见），您可以使其看起来与其他普通浏览器看起来非常相似

Answer 2

从我在IE9的最新版本中的经验来看，我无法获得带有图例的字段集以获得半径。我在IE9中的其他边框没有任何问题，css3 border-radius工作得很好，只有fieldset / ledgend。我仍然对此感到头疼。

Answer 3

我也常常使用fieldset而不仅仅是表单，但是兼容性的不断命中和错过导致我转储它们。最好编写自己的模拟fieldset的CSS DIV类。使用CSS，您可以获得字段集的精确副本，并且您具有更多的灵活性和兼容性

Answer 4

它只在最新的rc版本中工作，不是在IE9的beta版本中工作尝试


.class {
 border-radius-right-bottom: 15px;
}

Answer 5

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

这是如何修复它。

Answer 6

使用图例时 IE11 仍然存在问题，解决方案就在这个主题中：

Rounded corners on a fieldset

 fieldset {
        margin:20px;
        padding:0 10px 10px;
        border:1px solid #666;
        border-radius:8px;
        box-shadow:0 0 10px #666;
        padding-top:10px;
 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

Answer 7

场地集渲染总是充满了渲染问题，特别是打印问题。它不起作用就不足为奇了。

标准解决方法是添加另一个容器和样式。

Answer 8

要让IE9使用圆角（CSS 3），您必须将其添加到HTML标题中：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

然后正常使用CSS：border-radius-right-bottom:15px;

我有同样的问题＆amp;这解决了它。

Answer 9

我只能访问CSS文件，因此我无法对HTML进行任何更改，因此我在CSS中使用了IE浏览器。

HTML结构是：

<form>
  <fieldset>
      ...form content...
  </fieldset>
</form>

所有浏览器和IE浏览器的整个CSS：

fieldset {
    border-radius: 20px;
    border: 1px #3D3D3D solid;
}
@media screen and (min-width:0\0) {
    form {
        border: 1px #3D3D3D solid;
        border-radius: 20px;
    }
    fieldset {
        border: 0 none;
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

当然，如果您的网站有另一个html结构，这将无效。因此，相反，“表单”可以将css应用于字段集的父div。

IE9 fieldset圆角

9 个答案: