在 IE7 中为 jquery ganttView 使用 css

Question

有人在 Internet Exlorer 7 上使用 css 文件吗？甘特图在 FF、I8、IE9 和 Chrome 上可以正常工作，但在 IE7 中，条形图不会浮动在网格上方，也不会进入滑块内部。有谁知道这个问题的答案吗？我已经尝试过我所知道的一切。

浏览器差异 IE7 和 IE9

https://github.com/thegrubbsian/jquery.ganttView

Answer 1

我在 IE7 中解决了这个问题（当然比在所有版本的 IE 中都解决了）。只需要在文件（jquery.ganttView.css）中写入：

div.ganttview-hzheader-month,
div.ganttview-hzheader-day,
div.ganttview-vtheader,
div.ganttview-vtheader-item-name,
div.ganttview-vtheader-series,
div.ganttview-grid,
div.ganttview-grid-row-cell {
    float: left;
    /* IE problem */
    position: relative;
    top: 0;
    left: 0;
}
...
div.ganttview-slide-container {
    overflow: auto;
    border-left: 1px solid #999;
    /* IE problem */
    position: relative;
}
...
div.ganttview-blocks {
    margin-top: 40px;
    /* IE problem */
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

IE7 下的问题来自于 div 元素上应用的 inline-block CSS 属性。
这不起作用，因为 IE7 只接受内联元素的 inline-block 属性。

我的解决方案是：
1) 在 jquery.fn.gantt.js 上，第 82 行替换

.append(jQuery('<div class="page-number"/>') 

为

.append(jQuery('<span class="page-number"/>')

2) 那么你必须通过在 CSS 文件上添加 IE7 hack 来修复一些布局副作用（页码向下移动）：

/*hack for IE7*/
*+html .fn-gantt .navigate .page-number span {
    top:-5px !important;
}