Question

我有一个奇怪的问题......在我的工作地点，我负责更新和维护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>

Answer 1

我不确定早期版本的IE不支持透明png。

你可以用css实现四舍五入。圆角现在得到了相当广泛的支持，你可以使它工作，即6＆amp; 7与css3pie http://css3pie.com/

尝试将其添加到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＆amp;较新版本的IE。为了让它与IE6和＆amp; IE7你应该从css3pie（http://css3pie.com/）中获取文件。我通常会为相关版本制作单独的IE特定CSS文件。

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

这样的东西

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

一旦掌握了它，就会非常直接，祝你好运！

Internet Explorer中.png图像周围的线条

1 个答案: