IE9 + css：固定头表的问题 [英] IE9 + css : problem with fixed header table

问题描述

所以，我认为这是一个CSS问题比任何东西，但基本上，我提供的HTML包含一个固定的标题表在反应式布局。

代码：
http://jsfiddle.net/JpRQh/10/

So, I think this is a CSS issue more than anything, but basically, the HTML I've provided contains a fixed header table in a reactive layout.
Code: http://jsfiddle.net/JpRQh/10/

有3行数据，但在IE9中，看起来表行非常疯狂，并且滚动条已被禁用。

There are 3 rows of data, but in IE9, it seems like table rows are crazy high, and the scroll bar hase been disabled.

紧跟在固定的标题表上：
http://www.imaputz.com/cssStuff/bigFourVersion .html
在IE9中也有同样的问题。

The example that I followed on fixed header tables: http://www.imaputz.com/cssStuff/bigFourVersion.html has the same problem in IE9.

有关如何解决问题的任何想法吗？

Any ideas on how to fix it?

编辑：如果有足够的数据，我保证表滚动。但我只包括3行例如。

I promise the table scrolls if there is enough data. But i only included 3 rows for example.

推荐答案

这是导致IE中的麻烦的规则。实例： http://jsfiddle.net/JpRQh/12/

This is the rule that causes the trouble in IE. Live example: http://jsfiddle.net/JpRQh/12/

html>body tbody.scrollContent {
    margin-top: 24px;
    padding-top: 8px;
    display: block;
    height: 400px; /* If you delete this rule you will see the table rows return to their normal size */
    overflow: auto;
    width: 100%
}

设置滚动样式 tbody 和固定标题等往往会导致跨浏览器兼容性的很多问题。您可以查看关于跨浏览器滚动的此链接 tbody 。

Styling a scrolling tbody and fixed headers etc. tends to cause a lot of issues with cross-browser compatibility. You might look at this link about cross-browser scrolling tbody.

此但似乎是最好的跨浏览器解决方案。您将需要检查CSS。

This however seems to be the best looking cross-browser solution. You will need to inspect the CSS.

这篇关于IE9 + css：固定头表的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！