背景图像获取互联网补齐Explorer中

Question

我有一个XHTML 1.0过渡的网页有以下主要表：

<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中，页面笑WS达预期：

在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你可以控制每个单元的填充，但不是单元格间隔。

编辑。

也可以尝试这个...

#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，它将修复盒子模型问题。