项目已接近尾声,本来是存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代码):
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的兼容性问题。
二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;}
实际样子如图.
主要的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代码的下面。
三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属性前面。
- 大小: 38.6 KB
分享到:
相关推荐
css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...
本文讲的是利用if来判断用户浏览器不同版本IE使用不同css,下面总结一些针对IE6、7、8条件注释语句用法
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
CSS兼容IE6,IE7和FF的总结 . 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; ...
二 IE下判断IE版本的语句 2 1. 直接案例 2 2. 语法 3 3. 注意事项 4 三 常见css的兼容性问题 4 1. IE6下float元素margin加倍 4 2. IE6下图片下方有空隙产生 4 3. ie6下空标签高度问题 4 4. IE6下这两个层中间有间隙 ...
css样式表火狐,ie6,ie7,FF,
其实,以前从来没有接触过CSS相关的内容,都是在做业务的编程,从来没想过...所出现的低级问题和浪费很多时间的状况也层出不穷,所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS的区别,给大家借鉴。
FF与IE对javascript和CSS的区别,不同浏览器兼容问题总结
IE与Firefox的CSS兼容问题 web2.0经验总结
如何让你写的代码更兼容火狐和IE...本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼容了,其他的就是一些浏览器的BUG了,发一些技巧给你看看,或许有用。
区分ie 6 7 8 ; background:红色; /*非ie显示*/ bankground:蓝色 \9; /*ie显示*/ }
一个老程序员总结的用于IE 和 firefox 的技巧大全. 很实用. 不花哨
主要介绍了IE浏览器单独写CSS样式的几种方法,本文总结了IE hacks、条件注释 CSS、条件注释 html 标签3种方法,需要的朋友可以参考下
ie6, ie7, ie8, firefox 前段开发应用中常遇到的兼容性,总结。
总结一下css在各个浏览器上兼容的,主要是ie6、7、8和火狐浏览器之间css的区别
Css hack总结及其最佳用法,IE6\7\8的hack讲的很清楚,有图例说明,下拉看看吧。
1、div的垂直居中问题: 解决方法:将行距增加到和整个DIV一样高: 复制代码代码如下:div{ height: 100px; line-height: 100px;...ie6下,div设置为float时,左(右)margin会加倍。 解决方法:在这个div里面加上d
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容. ...
收集总结了ie6和其他浏览器下的兼容性问题