在Photoshop中保存爲網頁切片頁面在IE中看起來很糟糕

我通過Photoshop製作了網頁，將其切片並保存爲網頁並上傳了html文件。在Firefox和Chrome瀏覽器中看起來很好，但IE瀏覽器完全不同。任何人都知道如何解決它，爲什麼我會得到這個黑色填充？在Photoshop中保存爲網頁切片頁面在IE中看起來很糟糕

IE:

Firefox, Chrome & Safari:

Firefox

代碼：

<html> 
<head> 
<title>Shamir Applications</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255"> 
</head> 
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<!-- Save for Web Slices (Webpage08.psd) --> 
<table id="Table_01" width="960" height="720" border="0" cellpadding="0" cellspacing="0" style="margin-right: auto; margin-left: auto;"> 
    <tr> 
     <td colspan="11"> 
      <img src="images/Webpage08_01.png" width="960" height="237" alt=""></td> 
    </tr> 
    <tr> 
     <td rowspan="6"> 
      <img src="images/Webpage08_02.png" width="130" height="483" alt=""></td> 
     <td> 
      <img src="images/Webpage08_03.png" width="138" height="36" alt=""></td> 
     <td rowspan="6"> 
      <img src="images/Webpage08_04.png" width="142" height="483" alt=""></td> 
     <td colspan="3"> 
      <img src="images/Webpage08_05.png" width="138" height="36" alt=""></td> 
     <td rowspan="6"> 
      <img src="images/Webpage08_06.png" width="140" height="483" alt=""></td> 
     <td colspan="3"> 
      <img src="images/Webpage08_07.png" width="138" height="36" alt=""></td> 
     <td rowspan="6"> 
      <img src="images/Webpage08_08.png" width="134" height="483" alt=""></td> 
    </tr> 
    <tr> 
     <td rowspan="5"> 
      <img src="images/Webpage08_09.png" width="138" height="447" alt=""></td> 
     <td colspan="3"> 
      <img src="images/Webpage08_10.png" width="138" height="13" alt=""></td> 
     <td colspan="3"> 
      <img src="images/Webpage08_11.png" width="138" height="13" alt=""></td> 
    </tr> 
    <tr> 
     <td rowspan="2"> 
      <img src="images/Webpage08_12.png" width="14" height="146" alt=""></td> 
     <td> 
      <img src="images/Webpage08_13.png" width="110" height="110" alt=""></td> 
     <td rowspan="2"> 
      <img src="images/Webpage08_14.png" width="14" height="146" alt=""></td> 
     <td rowspan="4"> 
      <img src="images/Webpage08_15.png" width="16" height="434" alt=""></td> 
     <td> 
      <img src="images/Webpage08_16.png" width="110" height="110" alt=""></td> 
     <td rowspan="4"> 
      <img src="images/Webpage08_17.png" width="12" height="434" alt=""></td> 
    </tr> 
    <tr> 
     <td> 
      <img src="images/Webpage08_18.png" width="110" height="36" alt=""></td> 
     <td rowspan="3"> 
      <img src="images/Webpage08_19.png" width="110" height="324" alt=""></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <img src="images/Webpage08_20.png" width="138" height="17" alt=""></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <img src="images/Webpage08_21.png" width="138" height="271" alt=""></td> 
    </tr> 
</table> 
<!-- End Save for Web Slices --> 
</body> 
</html>

來源

2012-10-17 DanM

什麼版本的IE？ –

IE9，但它看起來在所有IE瀏覽器相同，9,8,7 – DanM

你可以發佈你的HTML代碼？或更好jsfiddle –

你可以嘗試使用表格方式使用CSS出口而沒有切換？

對於馬太·米哈伊的答案很可能需要添加這以及：

img { 
    border:0; 
    padding:0; 
    margin:0; 
    display:block; /* This often removes extra spacing around images in IE */ 
}

來源

2012-10-17 08:24:00 Pebbl

嘗試把這個在你的CSS文件

img { 
    border:0; 
    padding:0; 
    margin:0; 
}

或head標籤寫

<style type="text/css"> 
    img { 
     border:0; 
     padding:0; 
     margin:0; 
    } 
</style>

來源

2012-10-17 07:53:31

試過：tr { \t \t margin：0; \t \t padding：0; \t \t border：0; } td { \t \t margin：0; \t \t padding：0; \t \t border：0; } img { border：0; 填充：0; margin：0; } ----並沒有幫助 – DanM

在Photoshop中保存爲網頁切片頁面在IE中看起來很糟糕

回答

相關問題