IE不同版本的css小结

2012-08-31

IE不同版本的css总结项目已接近尾声，本来是存java程序员，奈何公司没有美工，所以得自己写css。这里把项目中I

IE不同版本的css总结

项目已接近尾声，本来是存java程序员，奈何公司没有美工，所以得自己写css。这里把项目中IE不同版本存在的css问题记录下来，并给出已经解决的方法。
很多都是网上搜来的，感谢网络的强大。
一表头固定。
下面是表头固定的css，也是来自google。
[code="css]
/*
* 锁定表头表格样式，仅适用于IE6/7/8
* Create by Aries BLOG: http://www.cnblogs.com/sansi/
*/
body
{
    font-family: Tahoma;
    font-size: 12px;
}
.fixbox
{
    border:1px solid #ccc;
    width:400px;
    height:150px;
    overflow:auto;
    position:relative;
    z-index:202;
}
.fixtable
{
    width:100%;
    z-index:1001;
    position:relative;
    overflow:auto;
    border-spacing:0;
    border-collapse:collapse;
    border:0;
}
.fixtable tr
{
    background-color:#fff;
}
.fixtable th
{
    top:expression(this.parentElement.parentElement.parentElement.parentElement.scrollTop - 0);
    position:relative;
    z-index:10;
    background:url(headbg.jpg) repeat-x top left;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    height:19px;
}
.fixtable td
{
    height:20px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    text-align:center;
}
th.lockcolumn
{
    left:expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);
    z-index:99;
    width:80px;
}
td.lockcolumn
{
    position:relative;
    left:expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);
}

.fullwidth
{
    width:100%;
}

.xscroll
{
    overflow-x:hidden;
}

在实际开发中需要设置fixbox块的高度，因为不同电脑的屏幕的高度是不同的所以使用js设置高度，代码如下（jquery代码）：


这个代码能解决很多IE8的兼容性问题。
二div固定。
在新的css中添加了position：fixed属性值，这个在IE6中是不支持的。
下面是我页面中的一个固定提示框的css。

主要的css是这段
 .InfoBox{position:fixed; left:0px; bottom:0px; border:1px solid #A9BCCC;z-index:1601;background-color:#fff}
因为在IE6下面的固定解决办法如下：
在html代码的head标签里面添加如下代码：
.InfoBox .IB_Content{height:expression(this.scrollHeight  > 240?"240px":"auto");min-height:50px; max-height:240px;width:253px;overflow-y:auto;overflow-x:hidden;margin:2px;border:1px solid #A9BCCC;}

height:expression(this.scroolHeight > 240?"240px":"atuo")
这段代码写在max和min属性前面。

热点排行

CSS

IE不同版本的css小结