在Internet Explorer中填充背景圖片

Question

我有一個帶有以下主表的XHTML 1.0 Transitional網頁：

<table>
<tr>
<!-- header -->
</tr>
<tr>
<td class="left"><!-- menu --></td>
<td class="content"><!-- content and header iamge --></td>
<td class="right"><!-- other stuff --></td>
</tr>
<tr>
<!-- footer -->
</tr>
</table>

CSS看起來像這樣：

#content {
    width:100%;

    vertical-align:top;
    background-color:white;

    /* desired padding of the content */
    padding-right:10px;
    padding-left:10px;
    padding-bottom:10px;

    background-image: url(bilder/pseudo-panorama3.jpg);
    background-repeat:no-repeat;
    background-position: center top;
    padding-top:213px; /* height of the picture + the desired 10px padding to the content */

}

計划的行為如下：

在Firefox 31中，頁面按預期顯示：

在Internet Explorer 11中，背景圖片和單元格邊框之間有一個空格：

我該怎么做才能刪除該空間？ 我已經嘗試過background-clip ，但是沒有用。

網頁的URL在這里： http : //www.thrs-heidelberg.de/v2/htdoc/

Answer 1

您應該將此添加到表格標簽中。

<table border="0" cellpadding="0" cellspacing="0">...</table>

試試看，看看是否有相同的問題。

默認情況下，表格的cellpadding和cellspacing的默認值為2，即使您完全沒有指定也是如此。

使用css，您可以控制每個單元格的填充，但不能控制cellspacing。

編輯。

也試試這個...

#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;

    /* Put the rest of your css here for this class */
}

這是問題所在...

您有一個大小（寬度）為100px的框，在填充區（左右）中添加了10px

您應該期望該框仍為100px，但是在某些瀏覽器中卻並非如此。

總共20px將添加到原始100px，因此您的框將是120px，如果添加邊框，也會發生這種情況。

解決此問題的方法是將受影響的對象應用於先前提到的CSS，這將解決盒子模型問題。