IE9 + css : problem with fixed header table

自古美人都是妖i 提交于 2019-12-19 10:54:08

问题


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/

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

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?

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


回答1:


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%
}

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.

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



来源:https://stackoverflow.com/questions/6903498/ie9-css-problem-with-fixed-header-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!