Question

我有一个关于CSS背景图片的简单问题。我的意图是使用图像在桌边上显示圆角（不使用border-radius属性）。

<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＆amp;从浏览器模式7到9，IE上面的CSS工作完全正常，但是当将文档模式更改为IE 7标准时，它变得扭曲。它似乎在左右垂直之间有一个间隙。

enter image description here

我该如何解决这个问题？在拥有CSS3 border-radius之前，在网页中实现圆角的最佳方法是什么？

先谢谢你。

Answer 1

我会使用类似http://css3pie.com/的内容，它可以在＆lt;上创建一些CSS3功能。 IE9 版本。就个人而言，我是那些认为网页在所有浏览器中看起来不应该100％相同的人之一，例如Chrome / Firefox / Safari应该得到圆角和＆lt; IE9不应该。

Answer 2

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

桌面上的CSS圆角在文档模式IE7标准中出现问题

2 个答案: