18

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

4

9 回答 9

23

仅当您使用<fieldset>with <legend>- 时才会发生这种情况 - 没有它，角落渲染正常。

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

根据您的图例样式的外观（背景看起来相同 - 没有背景，字段集的边框在字母后面仍然可见），您可以使其看起来与其他普通浏览器中的几乎相同。

于 2011-10-26T13:53:00.440 回答
3

我也曾经使用 fieldset 并且不仅仅用于表单，但对兼容性的不断打击和遗漏导致我转储它们。最好编写自己的模拟字段集的 CSS DIV 类。使用 CSS，您可以获得字段集外观的精确副本，并且您拥有更多的灵活性和兼容性

于 2012-10-27T19:27:56.080 回答
3

根据我在 IE9 最新版本中的经验，我无法让带有图例的字段集具有半径。我在 IE9 中的其他边框没有任何问题，css3 边框半径工作得很好，只是 fieldset/ledgend。我还在为此挠头。

于 2011-02-28T03:11:58.073 回答
1

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


.class {
 border-radius-right-bottom: 15px;
}
于 2011-01-22T05:31:28.947 回答
1

在IE11下使用legend仍然存在问题 ，解决方法在这个线程中：

字段集上的圆角

 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/

于 2015-04-09T13:44:37.337 回答
1

您可以添加以下元标记：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
于 2011-11-15T21:33:12.737 回答
0

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

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

然后像往常一样使用 CSS：border-radius-right-bottom:15px;

我有同样的问题，这解决了它。

于 2011-01-24T13:19:51.963 回答
0

字段集渲染总是充满渲染问题，尤其是打印问题。它不起作用也就不足为奇了。

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

于 2011-01-05T03:43:53.650 回答
0

我只能访问 CSS 文件，所以我无法对 HTML 进行任何更改，所以我在 IE 的 CSS 中进行了破解。

HTML结构是：

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

适用于所有浏览器和 IE hack 的整个 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。

于 2015-08-02T18:47:22.403 回答