无法解释的 UI 呈现问题
谁能解释一下上面 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;
}
此 Web 应用程序的组件是：
- ASP.NET MVC 3
- Razor View Engine
- jQuery 1.5.1
- SQL Server 2008
- IIS 7.5
此问题出现在 FF4、IE8 和IE7。如果您知道这种无法解释的演示行为的根本原因，请告诉我。
谢谢。
Can anyone explain the weird presentation behavior in the UI screenshot above? As you can see, there's an undesirable separation between the insurance type and the top of the row. When looking at the code via Firebug, there's a clear break in the code. You can view this oddity in the code screenshot below.
The div.insurance-type parent container has no CSS styles. In other words, the vertical-align property, the margin-top property, the padding-top property, and the float property are set to default values and don't inherit a value that might cause this presentation. The children divs have this style:
div#worklist table tr td.col-InsuranceType div.insurance-type div {
display: block;
margin-bottom: 2px;
margin-left: 25px;
}
The span.insurance-company has this style:
div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
font-weight: bold;
}
The components of this web app are:
- ASP.NET MVC 3
- Razor View Engine
- jQuery 1.5.1
- SQL Server 2008
- IIS 7.5
This issue occurs in FF4, IE8 and IE7. Please let me know if you know the root cause of this unexplainable presentation behavior.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这只是一个猜测，因为我看不到实际的页面，td 和 div 之间是否存在一些垃圾字符，甚至 firebug 也无法显示？如果内容不是客户端生成的（即：通过 Ajax），请尝试在 Firefox 中查看源代码（Ctrl-U 或 Cmd-U）并查看其中是否有任何奇怪的字符。我什至会在 Fiddler 中查看原始数据。
另一方面，
是不好的做法（不是语义），请使用代替。 :)This is just a guess since I can't see the actual page, could there be some garbage character between the td and div that even firebug has trouble displaying? If the content is not client-side generated (ie: via Ajax), try viewing the source in Firefox (Ctrl-U or Cmd-U) and see if there is any weird character in there. I would even go as far as looking at the raw data in Fiddler.
On a different note,
<div class="bold">is bad practice (not semantic), use<strong>instead. :)这可能有帮助：
了解垂直对齐，或“如何（不）垂直居中内容”
This might help:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
而不是
你尝试过：
Instead of
have you tried: