使用display:inline table从div中删除多余的单元格空间?

时间:2010-08-12 02:50:51

标签: css padding css-tables

这太烦人了。 在Firefox和Opera中,我在嵌套的div之间进行填充,但在Chrome和Safari中没有填充。

我尝试了border-collapse:collapse

但没有运气,任何想法? 这个额外的空间搞砸了我的流体页脚(所有div宽度加起来都达到了100%,但是因为Opera和Firefox添加了我从未要求的空间(!)它会溢出。

这是我的代码:

HTML:

<div id="footer">

<div class="info" id="message">&nbsp;&nbsp;Coming Soon</div>
<div class="info" id="address">The Studio 22 Belsham Street London E9 6NG</div>
<div class="info" id="telephone">+44 (0) 778 079 6488</div>
<div class="info" id="enquiries">Enquiries</div>
<div class="info" id="mailingList">Mailing List ___________________ Submit&nbsp;&nbsp;</div>

</div>

CSS:

#footer {
z-index:3;
position:fixed; 
bottom:0; 
width:100%; 
padding: 0;
padding-bottom: 10px;
display: table;
margin: 0;
border-collapse: collapse;


}

.info{
margin:0;
padding: 0;
display: inline-table;
border: red 1px dashed;
}

#message {
    width:10%;
}

#address {
width:33%;
text-align:center;
}

#telephone {
width:20%;
text-align:center;
}

#enquiries {
width:5%;
text-align:center;
}

#mailingList {
width:29%;
text-align: right;
}

1 个答案:

答案 0 :(得分:2)

答案: 将内联表属性更改为表格单元格。

有道理......

希望这可以帮助那些人。