谁能解释上面 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 中。如果您知道这种无法解释的呈现行为的根本原因,请告诉我。
谢谢。
最佳答案
这只是一个猜测,因为我看不到实际的页面,td 和 div 之间会不会有一些垃圾字符,即使是 firebug 也无法显示?如果内容不是客户端生成的(即:通过 Ajax),请尝试在 Firefox 中查看源代码(Ctrl-U 或 Cmd-U)并查看其中是否有任何奇怪的字符。我什至会在 Fiddler 中查看原始数据。
换句话说,<div class="bold">
是不好的做法(不是语义的),使用 <strong>
反而。 :)
关于html - 无法解释的 UI 呈现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6313006/