인터넷 익스플로러에서 .png 이미지 라인.

Question

이상한 문제가 있습니다 ... 제 취업 처에서 Spiceworks 사용자 포털을 업데이트하고 유지 관리하며, 회사 뉴스와 함께 물건. 문제는 ... 내가 테이블의 배경으로 설정 한 그림의 모서리를 둥글게하는 .png 이미지를 만들었습니다. Firefox와 Chrome에서 모두 완벽하게 보이도록 만들었지 만 Internet Explorer에서는 .png 파일에 외부의 개요가 있습니다.

사진이에서 찾을 수 있습니다 : 비교가 첨부 http://i1099.photobucket.com/albums/g383/zachoxley/CFvsIE_zps1edbce9c.png 난의 ... CSS 클래스가 이미지에 적용되는 수직 정렬 생각할 수있는 모든 것을 시도

, 그래서 나는 서로를 적용하는 시도 클래스와 동일한 스타일의 td 태그 ... 주사위 없음. 나는 심지어 td 태그에 valign = "bottom"속성을 적용하려고 시도했다. 아무것도. 보시다시피 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 & 7 with 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 & 최신 버전의 IE에서 작동합니다. IE6 & IE7에서 작동 시키려면 css3pie (http://css3pie.com/)에서 파일을 가져와야합니다. 일반적으로 문제의 버전에 대해 별도의 IE 특정 CSS 파일을 만들 것입니다.

이 CSS 파일에는 이미지를 정의하고 PIE.htc 파일의 경로가 포함됩니다.

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

매우 정직하고 당신이 그것의 걸림, 행운을 일단 그것과 같은 것!