IE8 中的 CSS 圆角无标题页面...</desc> <question vote="58"> <p>我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。</p> <p>这是我的代码：</p> <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /--min-height: 500px/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <div class="leftcolumn"> <div class="lefttop"> <H4 class="categoryheading3">Heading</H4> <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p> </div> </div> </body> </html> </code></pre> <p>这会在 Firefox 中产生：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Fyc1BPLmpwZw==" alt="firefox example"/></p> <p>但是在 IE8 中是这样的：</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1h6dUNYLmpwZw==" alt="IE8 makes me sad"/></p> <p>如果有人有任何建议，我将不胜感激！ </p> <p>编辑：约瑟夫建议使用pie.htc提供了帮助，但是我仍然在为这个元素不起作用而苦苦挣扎：</p> <pre><code>.categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } </code></pre> </question> <answer tick="true" vote="69"> <p>Internet Explorer（版本 9 以下）本身不支持圆角。</p> <p>有一个令人惊叹的脚本会神奇地为您添加它：<a href="http://css3pie.com/" rel="noreferrer">CSS3 PIE</a>。</p> <p>我已经使用了很多次，效果惊人。</p> </answer> <answer tick="false" vote="33"> <h1><a href="http://davidwalsh.name/css-rounded-corners" rel="nofollow noreferrer">IE8 中的圆角</a></h1> <p>Internet Explorer 8（及更早版本）<strong>不</strong>支持圆角，<strong>但是</strong>还有<strong>您可以考虑的其他解决方案：</strong></p> <ul> <li><p>使用圆角<pre><code>Images</code></pre>代替（<a href="http://www.generateit.net/rounded-corner/" rel="nofollow noreferrer"><strong>这个</strong></a>生成器是一个很好的资源）</p> </li> <li><p>使用<pre></pre>此处<a href="http://jquery.malsup.com/corner" rel="nofollow noreferrer"><strong></strong>中的</a><code>jQuery Corner plugin</code></p> </li> <li><p>使用一个非常好的脚本，称为<pre><code>CSS3 PIE</code></pre>，来自<strong><a href="http://css3pie.com" rel="nofollow noreferrer">这里</a></strong>（优点和缺点<a href="http://css-plus.com/2011/05/ie-and-rounded-corners/" rel="nofollow noreferrer">这里</a>）</p> </li> <li><p>从<pre></pre>这里<a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/" rel="nofollow noreferrer"><strong></strong>结帐</a><code>CSS Juice</code></p> </li> <li><p>另一个好的脚本是<pre><code>IE-CSS3</code></pre>，来自<strong><a href="http://fetchak.com/ie-css3/" rel="nofollow noreferrer">这里</a></strong></p> </li> </ul> <p>尽管 CSS PIE 是最流行的解决方案，我建议您查看所有其他解决方案并选择最适合您需求的解决方案。</p> <p>我希望它有用。祝你好运！</p> </answer> <answer tick="false" vote="4"> <p>看到这篇文章后，我不知道 css3pie.com，一个非常有用的网站：</p> <p>但是经过测试，它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以代替：</p> <pre><code>behavior: url(PIE.htc); </code></pre> <p>用这个：</p> <pre><code>behavior: url(PIE.php); </code></pre> <p>我把我的放在一个名为 jquery 的文件夹中，所以我的是：</p> <pre><code> behavior: url(jquery/PIE.php); </code></pre> <p>所以去他们的下载或在这里获取：</p> <p><a href="http://css3pie.com/download-latest" rel="nofollow">http://css3pie.com/download-latest</a></p> <p>并使用他们的 PHP 文件。在 PHP 文件中，它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。</p> <p>尝试一下！我做了，它有效。希望这也能帮助其他人。</p> </answer> <answer tick="false" vote="2"> <p><a href="http://fetchak.com/ie-css3/" rel="nofollow">http://fetchak.com/ie-css3/</a> 适用于 IE 6+。如果 css3pie 不适合你，请使用这个。</p> </answer> <answer tick="false" vote="2"> <p>PIE.htc 对我来说非常有用（<a href="http://css3pie.com/" rel="nofollow">http://css3pie.com/</a>），但有一个问题：</p> <p>您应该写入PIE.htc的绝对路径。当我使用相对路径时，它对我不起作用。</p> </answer> <answer tick="false" vote="0"> <p>由于 Internet Explorer 本身不支持圆角。因此，更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。</p> <p>您还可以在网络上找到圆形图像生成器。其中一个链接是 <a href="http://www.generateit.net/rounded-corner/" rel="nofollow">http://www.generateit.net/rounded-corner/</a></p> </answer> </body></html>