html - 无法解释的 UI 呈现问题

Question

谁能解释上面 UI 屏幕截图中奇怪的呈现行为？如您所见，保险类型和行顶部之间存在不希望的分隔。通过 Firebug 查看代码时，代码中有明显的中断。您可以在下面的代码屏幕截图中查看这种奇怪现象。

div.insurance-type 父容器没有 CSS 样式。换句话说，vertical-align 属性、margin-top 属性、padding-top 属性和 float 属性被设置为默认值，并且不会继承可能导致此显示的值。子 div 具有这种样式:

div#worklist table tr td.col-InsuranceType div.insurance-type div {
    display: block;
    margin-bottom: 2px;
    margin-left: 25px;
}

span.insurance-company 具有这种风格:

div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
    font-weight: bold;
}

此网络应用程序的组件是:

• ASP.NET MVC 3
• Razor View 引擎
• jQuery 1.5.1
• SQL Server 2008
• IIS 7.5

此问题出现在 FF4、IE8 和 IE7 中。如果您知道这种无法解释的呈现行为的根本原因，请告诉我。

谢谢。

Answer 1

这只是一个猜测，因为我看不到实际的页面，td 和 div 之间会不会有一些垃圾字符，即使是 firebug 也无法显示？如果内容不是客户端生成的(即:通过 Ajax)，请尝试在 Firefox 中查看源代码(Ctrl-U 或 Cmd-U)并查看其中是否有任何奇怪的字符。我什至会在 Fiddler 中查看原始数据。

换句话说，<div class="bold">是不好的做法(不是语义的)，使用 <strong>反而。 :)