文档模式 IE7 标准中表格边缘的 CSS 圆角问题答案

【问题标题】：CSS Round Corner on Table Edges Issue in Document Mode IE7 Standards文档模式 IE7 标准中表格边缘的 CSS 圆角问题
【发布时间】：2012-03-04 18:03:05
【问题描述】：

我有一个关于 CSS 背景图像的简单问题。我的意图是使用图像在桌子边缘显示圆角（不使用边框半径属性）。

<style type="text/css">
    .top
    {
        background-repeat:repeat;
        vertical-align:top;
    }

    .left
    {
        text-align:left;
    }

    .middle
    {
    }

    .right
    {
        text-align:right;
    }

    .bottomLeft
    {
        vertical-align:bottom;
    }

    .bottom
    {
        background-repeat:repeat;
        vertical-align:bottom;
    }

    .bottomRight
    {
        vertical-align:bottom;
    }
</style>

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td class="topLeft">
            <img height="16px" src="Images/greenTL.gif" style="vertical-align:bottom" />
        </td>
        <td class="top">
            <img height="4px" width="100%" src="Images/greenT.gif" style="vertical-align:8px" />
        </td>
        <td class="topRight">
            <img height="16px" src="Images/greenTR.gif" style="vertical-align:bottom" />
        </td>
    </tr>
    <tr>
        <td class="left">
            <img height="100%" src="Images/greenL.gif"/>
        </td>
        <td class="middle">
        </td>
        <td class="right">
            <img height="100%" src="Images/greenR.gif"/>
        </td>
    </tr>
    <tr>
        <td class="bottomLeft">
            <img height="16px" src="Images/greenBL.gif" style="vertical-align:top" />
        </td>
        <td class="bottom" >
            <img height="4px" width="100%" src="Images/greenB.gif" />
        </td>
        <td class="bottomRight">
            <img height="16px" width="16px" src="Images/greenBR.gif" style="vertical-align:top"/>
        </td>
    </tr>
</table>

上面的 HTML 和 CSS 在 IE 浏览器模式 7 到 9 中工作得非常好，但是当将 文档模式更改为 IE 7 标准时它变得扭曲了。好像左右垂直有间隙。

我该如何解决这个问题？在使用 CSS3 边框半径之前，在网页中实现圆角的最佳方法是什么？

先谢谢你了。

【问题讨论】：

标签： html css internet-explorer background-image

【解决方案1】：

我会使用http://css3pie.com/ 之类的东西，它可以在

【讨论】：

【解决方案2】：

不要使用表格进行布局。对于浏览器中不支持原生border-radius的圆角，可以使用图形角作为绝对定位的空元素的背景。

【讨论】：