blocks|key|835141|text|Fieldset渲染总是充满渲染问题，尤其是打印问题。它不工作也就不足为奇了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|835142|标准的解决方法是添加另一个容器和样式。|835143|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Fieldset rendering is always fraught with problems with rendering and particularly with printing. It's hardly surprising that it doesn't work.

The standard workaround is to add another container and style that.

blocks|key|1049938|text|要让IE9使用圆角(CSS3)，您必须在HTML头中添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1049939|<meta+http-equiv="X-UA-Compatible"+content="IE=Edge"+/>|offset|length|style|CODE|1049940|然后像往常一样使用CSS：border-radius-right-bottom:15px;|1049941|我也有同样的问题&这解决了它。|1049942|entityMap^0|0|0|1J|0|D|W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

To get IE9 to use rounded corners(CSS 3) you have to add this to the HTML header:

<code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;</code>

Then use CSS as normal: <code>border-radius-right-bottom:15px;</code>

I had the same issue &amp; this fixed it.

blocks|key|835260|text|根据我在最新版本的IE9中的经验，我无法获得带有图例的具有半径的字段集。我在IE9的其他边框上没有遇到任何问题，css3边框半径工作得很好，只是字段集/ledgend。我还在为这件事挠头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|835261|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

From my experence in the latest version of IE9, I can not get a fieldset with legend to have a radius. I have not had any trouble with other borders in IE9, the css3 border-radius works just fine, just fieldset/ledgend. I'm still scratching my head over this.

blocks|key|835353|text|只有当你在<legend>中使用<fieldset>的时候才会发生这种情况--如果没有它，角的渲染效果会很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|835354|您可以通过将display:inline或display:inline-block应用于<legend>元素来修复此错误-但是您必须通过设置position:relative并移动它来重新定位它。|835355|根据图例的样式(有了背景，它看起来是一样的--没有背景，fieldset的边框仍然在字母后面可见)，你可以让它看起来和其他普通浏览器几乎一样。|835356|entityMap^0|5|8|G|A|0|6|E|L|K|18|8|1Y|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$]]

This happens only if you use <code>&lt;fieldset&gt;</code> with <code>&lt;legend&gt;</code> - without it the corners render ok.

You can fix this bug by applying <code>display:inline</code> or <code>display:inline-block</code> to your <code>&lt;legend&gt;</code> element - but than you have to reposition it back in place by setting <code>position:relative</code> and moving it around.

Depending how the styling of your legend looks like (with background it will look the same - without the background the border of fieldset will still be visible behind the letters) you can make it look pretty much the same as in other normal browsers.

blocks|key|1050121|text|您可以添加以下meta标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1050122|<meta+http-equiv="X-UA-Compatible"+content="IE=Edge"+/>|code-block|syntax|javascript|1050123|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can add the following meta tag:

<pre class="lang-html prettyprint-override"><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
</code></pre>

blocks|key|1050187|text|我也习惯于使用fieldset，而不仅仅是表单，但在兼容性方面的不断失误导致我抛弃了它们。最好编写自己的CSS+DIV类来模拟fieldset。使用CSS，您可以获得字段集外观的精确副本，并且具有更大的灵活性和兼容性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1050188|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I too used to use fieldset and for more than just forms, but the constant hit and miss on compatibility has caused me to dump them. Better to write your own CSS DIV Classes that emulate fieldset. Using CSS you can get an exact replica of what fieldset looks like and you have a lot more flexibility and compatibility

blocks|key|1050235|text|我只能访问CSS文件，所以我不能在HTML中做任何更改，所以我在IE的CSS中进行了修改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1050236|HTML结构是：|1050237|<form>
++<fieldset>
++++++...form+content...
++</fieldset>
</form>|code-block|syntax|javascript|1050238|适用于所有浏览器和IE+hack的整个CSS：|1050239|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;
++++}
}|1050240|当然，如果您的站点有另一个html结构，这将不起作用。因此，您可以在css中将"form“应用于fieldset的父div。|1050241|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had an access only to CSS file, so I could not make any changes in HTML, so I made the hack in CSS for IE.

HTML structure was:

<pre><code>&lt;form&gt;
 &lt;fieldset&gt;
 ...form content...
 &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

The whole CSS for all browers and with IE hack:

<pre><code>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;
 }
}
</code></pre>

Of course, if your site has another html-structure, this will not work. Therefore instead "form" you can apply in css to a parent div of your fieldset.

I cannot seem to make IE9 render a fieldset with rounded corners whereas other browsers do.
Has anyone encountered this too ?

IE9 fieldset rounded corners

容器

我似乎不能让IE9呈现圆角的字段集，而其他浏览器是这样做的。有没有人也遇到过这种情况？

问IE9字段设置圆角
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9字段设置圆角EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9字段设置圆角
EN