0

我有一个奇怪的问题……在我的工作地点，我负责更新和维护 Spiceworks 用户门户，我们在上面放置公司新闻以及其他一些东西。问题是......我创建了一个 .png 图像来圆角图片，我已将其设置为表格的背景。我让它在 Firefox 和 Chrome 上看起来都很完美，但在 Internet Explorer 上，.png 文件出于某种原因在它们的外部有一个轮廓。附上对比：

可以在以下位置找到图片：http: //i1099.photobucket.com/albums/g383/zachoxley/CFvsIE_zps1edbce9c.png

我已经尝试了我能想到的一切......垂直对齐css类应用于图像，所以我尝试将另一个具有相同样式的类应用于td标签......没有骰子。我什至尝试将 valign="bottom" 属性应用于 td 标签。没有。如您所见，它在 Chrome/Firefox 上看起来不错，但不幸的是，这里的大多数员工都使用 IE。出于专业的目的，并且无论浏览器类型如何，页面看起来都一样，我真的很想解决这个问题。以前有没有人处理过这个问题？这是我正在使用的 HTML：

<p><style type="text/css">
    img.rotate90deg
    {
        display: inline-block;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
            -webkit-transform: rotate(90deg); /* Safari and Chrome */
            -o-transform: rotate(90deg); /* Opera */
            -moz-transform: rotate(90deg); /* Firefox */
        vertical-align: top;
    }
img.rotate180deg
    {
        display: inline-block;
            transform: rotate(180deg);
        -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Safari and Chrome */
            -o-transform: rotate(180deg); /* Opera */
            -moz-transform: rotate(180deg); /* Firefox */
        vertical-align: bottom;
    }
img.rotate270deg
    {
        display: inline-block;
            transform: rotate(270deg);
        -ms-transform: rotate(270deg); /* IE 9 */
            -webkit-transform: rotate(270deg); /* Safari and Chrome */
            -o-transform: rotate(270deg); /* Opera */
            -moz-transform: rotate(270deg); /* Firefox */
        vertical-align: bottom;
    }
table.nextevent
    {
        display: block;
        border: none;
        border-collapse: collapse;
    }
</style></p>
<table width="100%">
<tbody>
    <tr width="100%">
        <td width="5%">&nbsp;</td>
        <td width="95%">
        <table width="100%">
            <tbody>
                <tr width="100%">
                    <td width="40%">
                    <h2 align="left">Lunch - Jose Pepper's</h2>
                    <table align="left">
                        <tbody>
                            <tr colspan="2">
                            </tr>
                            <tr>
                                <td>
                                <h3 style="text-align: left; ">&nbsp; When:</h3>
                                </td>
                                <td>
                                <h3>Tuesday, February 19, 2013</h3>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </td>
                    <td width="20%" align="center">&nbsp;</td>
                    <td width="40%" align="center">
                    <table class="nextevent" height="201" width="300" border="0" cellpadding="0" cellspacing="0" style="background: url(http://blogs.kansas.com/dining/files/2010/07/chiliconqueso-thumb-1-300x201.jpg)">
                        <tbody>
                            <tr>
                                <td height="20" width="20"><img align="left" src="http://i1099.photobucket.com/albums/g383/zachoxley/Untitled_zpsbe7f3ae8.png" width="20" height="20" alt="" /></td>
                                <td height="20" width="260">&nbsp;</td>
                                <td height="20" width="20"><img class="rotate90deg" align="left" src="http://i1099.photobucket.com/albums/g383/zachoxley/Untitled_zpsbe7f3ae8.png" width="20" height="20" alt="" /></td>
                            </tr>
                            <tr>
                                <td height="161" width="20">&nbsp;</td>
                                <td height="161" width="260">&nbsp;</td>
                                <td height="161" width="20">&nbsp;</td>
                            </tr>
                            <tr>
                                <td height="20" width="20"><img class="rotate270deg" align="left" src="http://i1099.photobucket.com/albums/g383/zachoxley/Untitled_zpsbe7f3ae8.png" width="20" height="20" alt="" /></td>
                                <td height="20" width="260">&nbsp;</td>
                                <td height="20" width="20"><img class="rotate180deg" align="left" src="http://i1099.photobucket.com/albums/g383/zachoxley/Untitled_zpsbe7f3ae8.png" width="20" height="20" alt="" /></td>
                            </tr>
                        </tbody>
                    </table>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>
</table>
4

1 回答 1

1

在我的脑海中，我确定早期版本的 IE 不太支持透明 png。

您可以使用 css 实现舍入。圆角现在得到相当广泛的支持，您可以使用 css3pie http://css3pie.com/使其在 ie 6 和 7 上工作

尝试将此添加到 css 中的图像中。

.img{
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px; /* future proofing */
    -khtml-border-radius: 18px; /* for old Konqueror browsers */
}

它应该围绕普通图像的角落，所以你不需要手动做。这适用于 Firefox、Safari、Opera、Chrome 和更新版本的 IE。要让它与 IE6 和 IE7 一起工作，您应该从 css3pie ( http://css3pie.com/ ) 获取文件。我通常会为有问题的版本制作单独的 IE 特定 CSS 文件。

在这些 css 文件中定义图像并包含 PIE.htc 文件的路径。就像是

.img{
behavior: url(path/to/pie_files/PIE.htc);
}

一旦你掌握了它的窍门，它就很简单了，祝你好运！

于 2013-02-18T22:41:43.590 回答