奇妙な問題があります...私の職場では、Spiceworksユーザーポータルの更新と保守を担当しています。このポータルには、会社のニュースやその他の情報が掲載されています。問題は...テーブルの背景として設定した画像の角を丸くするために.png画像を作成しました。FirefoxとChromeの両方で完璧に見えるように作成しましたが、Internet Explorerでは、何らかの理由で.pngファイルの外側に輪郭があります。添付されているのは比較です。
写真は次の場所にあります：http： //i1099.photobucket.com/albums/g383/zachoxley/CFvsIE_zps1edbce9c.png
考えられるすべてのことを試しました...vertical-aligncssクラスが画像に適用されているので、同じスタイルの別のクラスを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%"> </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; "> When:</h3>
</td>
<td>
<h3>Tuesday, February 19, 2013</h3>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20%" align="center"> </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"> </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"> </td>
<td height="161" width="260"> </td>
<td height="161" width="20"> </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"> </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>