Question

我有这个html用于创建标题周围的框，这是一个流程图查看页面。相当直接，看起来正确。

    <td>
        <table align="center" border="0" style="border: thin solid black;" cellpadding="0">
            <tr>
                <td align="center" nowrap style="padding: 5px;" class="headerlarge">&nbsp;Resources:&nbsp;</td>
            </tr>
        </table>
    </td>

当我尝试使用带有边框和填充的跨度时，我会丢失顶部边框，该类仅用于字体。

font-weight: 600;
font-size: 12pt;
color: black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: normal;

当我尝试使用div时，边框填充整个父元素，我只希望它是一个适合文本的大小，而不是成长为任何东西。我在父TD元素以及div或span中使用了边距和填充。我需要用什么css来创建一个带有填充的框，它在文本周围非常适合，并且在表格单元格中不会丢失任何边框？

更新：所以我发现这个问题只针对IE6＆amp; 7，其他浏览器使用Phoenix的css，跨越一个跨度的div包装器。我发布了html / css Here at Jsbin 。所以问题仍然存在，如何在IE 6＆amp; 7没有任何黑客攻击而且没有做过css，否则我不妨坚持使用一个愚蠢的嵌套表。

Answer 1

编辑：我确认Nino's answer适用于Firefox 3.0.14 / Ubuntu 9.04和IE 8 / WinXP SP3。无需更新包含dt的{{1}}和tr标记的样式。所以结合这些东西，我们得到：

div

Answer 2

尝试在IE中使用display:inline-block作为容器。

Answer 3

<div class="divClass">
    <span class="headerlarge spanClass">
         Resources: 
    </span>
</div>
<style>
.headerlarge
{
    font-weight: 600;
    font-size: 12pt;
    color: black;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-style: normal;    
}
.divClass
{
    text-align: center; 
    padding: 0;
}
.spanClass
{
    white-space: nowrap; 
    padding: 5px; 
    border: 1px solid black;
}
</style>

用div或span替换这个html / table代码的正确方法是什么

3 个答案: