IE不同版本的css总结

项目已接近尾声,本来是存java程序员,奈何公司没有美工,所以得自己写css。这里把项目中IE不同版本存在的css问题记录下来,并给出已经解决的方法。
很多都是网上搜来的,感谢网络的强大。
[color=red]一[/color]表头固定。
下面是表头固定的css,也是来自google。

var windowHeight = $(window).height() - $(".fixbox").offset().top-15;//15 是滚动条的高度,ie和firefox有所区别,大致为15
$(".fixbox").css("height",windowHeight+"px");

还有在IE6/7/8中遇到浏览器解析不了表格的问题,也就是table-layout的问题。我这里使用下面的代码解决IE的兼容性问题。

<meta http-equiv="x-ua-compatible" content="ie=7" />

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

.InfoBox{position:fixed; left:0px; bottom:0px; border:1px solid #A9BCCC;z-index:1601;background-color:#fff}
.InfoBox .IB_Head{height:22px; line-height:22px;width:257px; border-bottom:1px solid #A9BCCC;background-color:#D1E5F7}
.InfoBox .IB_Head B{float:left}
.InfoBox .IB_Head P{float:left;margin-left:5px;font-weight:700;font-size:14px;font-family:Verdana, Arial, Helvetica, sans-serif}
.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;}
.InfoBox .IB_Content ul{list-style:none; width:236px}
.InfoBox .IB_Content ul li{ line-height:20px; width:236px}/** height:20px;**/
.InfoBox .IB_Content ul li div{margin:0 auto;text-align:center}
.InfoBox .IB_Content ul li p{ float:left;height; line-height:20px;margin-left:5px;;overflow:hidden;width:200px}
.InfoBox .IB_Content ul li a{float:right; background:url(images/s2.png) 0 -30px;height:8px; width:8px;margin:6px 5px 6px 0;cursor:pointer;width:20px;}
.InfoBox .IB_Content ul li a:hover{background:url(images/s2.png) -30px -30px;}
.InfoBox .IB_Head a{float:right;width:12px;height:12px;margin:4px; cursor:pointer}
.InfoBox .IB_Head a.max{background:url(images/s2.png) -48px -90px no-repeat;}
.InfoBox .IB_Head a.max:hover{background:url(images/s2.png) -48px -102px no-repeat;}
.InfoBox .IB_Head a.min{background:url(images/s2.png) -12px -90px no-repeat;}
.InfoBox .IB_Head a.min:hover{background:url(images/s2.png) -12px -102px no-repeat;}
.InfoBox .IB_Head a.Clear{background:url(images/s2.png) -84px -90px no-repeat;}
.InfoBox .IB_Head a.Clear:hover{background:url(images/s2.png) -84px -102px no-repeat;}

实际样子如图.
[img]http://dl.iteye.com/upload/attachment/519502/7f8969b2-60aa-323e-8421-922e3a91b2b6.jpg[/img]
主要的css是这段
.InfoBox{position:fixed; left:0px; bottom:0px; border:1px solid #A9BCCC;z-index:1601;background-color:#fff}
因为在IE6下面的固定解决办法如下:
在html代码的head标签里面添加如下代码:

<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.InfoBox{position:absolute;left:0px; bottom:0px;}
</style>
<![endif]-->

这个代码要处于原先css代码的下面。
[color=red]三[/color]max-height,min-height在IE6下面的解决办法
使用expression表达式,结合css和js代码。

.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属性前面。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值