用于 IE8 的弯曲边框 CSS答案

【问题标题】：curved bordered CSS for IE8用于 IE8 的弯曲边框 CSS
【发布时间】：2012-04-10 06:52:50
【问题描述】：

我需要 IE8 和所有主要浏览器的弯曲边框 CSS。目前我正在尝试CSS PIE

jsfiddle 演示是here。但我建议回答者下载 PIE.htc 文件表单here 并尝试将 HTML 作为独立页面在 IE8 中获得真正的效果。

我的问题是包含“感谢您注册”文本的<td> 在 jsfiddle 的 IE8 中没有弯曲。如果我将它作为 HTML 页面运行，它在 IE8 中是弯曲的，但蓝色背景与“感谢您注册”<td> 重叠（但它的背景是“#f2f2f2”）。

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
        <tr>
            <td>&nbsp;</td>
            <td style="width: 60%; text-align: center;background: #0067C8;">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
                            <img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width:3%;">&nbsp;</td>
                        <td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
                            Thank you for registering
                        </td>
                        <td style="width:3%;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>

【问题讨论】：

标签： html css javascript css3pie

【解决方案1】：

我认为这主要是因为 z-index 的问题。

点击此处了解更多详情。 general issues encountered when using PIE

【讨论】：

你摇滚@Exor！找到了！ position:relative;z-index: 0; 在外部（带有背景颜色）中成功了！

【解决方案2】：

你试过http://jquery.malsup.com/corner/jquery插件添加曲线吗？

$(function () {
   $('table table tr:eq(2) td:eq(1)').corner();
});

演示：http://jsfiddle.net/bDvRd/4/

【讨论】：

我没有在那个独立页面上使用 jQuery，它实际上是一个电子邮件模板。但是+1，因为你是对的。我需要一个基于 CSS 的解决方案。你能试一次吗？
不幸的是，没有适用于所有主流浏览器的 CSS 解决方案。说要么使用 JS 解决方案，要么不考虑此类浏览器不支持角点，这将是苛刻的。

【解决方案3】：

尝试添加

position:relative;
z-index: 0;

Using CSS3Pie htc for border-radius in IE8

或CSS3 PIE - Giving IE border-radius support not working?

【讨论】：

+1 表示正确！但我已经接受了类似的答案:)