无法解释的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 Engine
• jQuery 1.5.1
• SQL Server 2008
• IIS 7.5

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

感谢。

Answer 1

这可能会有所帮助： Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 2

而不是

<div class="insurance-type">
   <div class="bold">
    <span class="insurance-company"

你试过了吗？

<div class="insurance-type"><div 
  class="bold"><span 
    class="insurance-company">

Answer 3

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

另一方面，<div class="bold">是不好的做法（不是语义），而是使用<strong>。 ：）