IE9 字段集圆角

Posted 2023-03-06

【中文标题】IE9 字段集圆角

【英文标题】：IE9 fieldset rounded corners

【发布时间】：2011-06-02 20:04:32

【问题描述】：

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

【问题讨论】：

重复：***.com/questions/635851/…

@digitalFresh：你读过这个问题吗？这是关于 IE9 - IE9 支持边界半径（如您的链接中所述）

@digitalFresh：这和这有什么关系？

嗯，圆角也不会出现在 Opera 11 上。

你应该在connect.microsoft.com/ie报告IE9错误

【参考方案1】：

您可以添加以下元标记：

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

【参考方案2】：

我只能访问 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。

【参考方案3】：

IE11下使用legend还是有问题 ，解决方案在这个线程中：

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/

【参考方案4】：

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

【参考方案5】：

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

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

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

【讨论】：

我发现虽然这确实解决了 IE 中的问题，但它在 chrome 中破坏了它。我必须将定位应用于图例以将其移动到正确的位置，但在 chrome 中移动到很远，但在 FF 和 IE 中很好。作为一种解决方法，我将样式固定在 IE 中以仅在 IE 中修复它IE only stylesheet。作为记录，我使用的样式是：display: inline-block; position relative; height: 30px; top: -15px;

显然。这将转到仅限 IE 的样式表 - 问题被标记为 internet-explorer - 这是 IE 的修复 - 您总是希望仅将修复应用于有问题的浏览器。

查看此 SO 答案以获取浮动的替代解决方案 <legend> ***.com/a/17406564/132599

【参考方案6】：

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

【讨论】：

这似乎是 IE9 版本中针对 fieldset + legend 的错误，至少可以说是令人恼火的。

【参考方案7】：

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

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

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

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

【讨论】：

IE9 应该默认支持border-radius。如果你需要使用它，这意味着你的设置中有一些东西使它变成了 IE8 兼容模式。您可能需要检查设置。如果你确实使用了这种技术，那么你应该可以只用IE=Edge；其余的都是无关紧要的，因为无论如何都没有其他浏览器识别X-UA-Compatible，即使他们识别了，你为什么要强制它们使用给定的版本号（你在这里修复了 IE 中的一个怪癖，而不是 Firefox）。跨度>

【参考方案8】：

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

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

【讨论】：

重新迭代是个好点——IE9 不是已发布的产品。它处于测试阶段。不要指望一切正常。如果您没有准备好遇到意外中断，请不要将其用作主要浏览器。

【参考方案9】：

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

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