项目已接近尾声,本来是存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
分享到:
相关推荐
通过上述分析可以看出,利用不同的Hack符号组合,可以有效地针对不同版本的IE浏览器进行差异化处理。需要注意的是,随着现代浏览器的发展,尤其是IE系列浏览器逐渐被Microsoft Edge所替代,CSS Hack的使用场景将逐渐...
针对IE特定版本的兼容性问题,可以利用条件注释来为不同版本的IE提供不同的样式表或脚本文件。 ```html <!--[if IE 9]> <link rel="stylesheet" type="text/css" href="ie9.css"> <![endif]--> ``` #### ...
在进行Web开发的过程中,我们经常会遇到浏览器兼容性问题,尤其是早期的Internet Explorer(IE)版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示,开发者需要使用特定...
1. **CSS3兼容性问题**:理解不同版本的IE浏览器对CSS3特性支持的局限性。 2. **HTC(HTML Component)文件**:了解HTC文件的工作原理,它是如何通过JavaScript或VBScript扩展CSS功能的。 3. **CSS的`behavior`属性*...
1. 测试:确保在不同版本的IE浏览器中进行充分的测试,确保圆角效果在所有目标环境中都能正常显示。 2. 性能:虽然CSS3 PIE等库提供了很好的兼容性解决方案,但它们可能会增加页面加载时间和内存占用,因此在大型...
css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...
### 解决不同版本IE浏览器兼容问题 #### 一、引言 随着Web技术的发展,不同浏览器之间的兼容性问题一直是前端开发者关注的重点之一。特别是在早期,Internet Explorer(简称IE)的不同版本间存在诸多差异,给开发者...
但在IE中,它们的支持并不完善,特别是在早期版本的IE中,这可能会导致布局问题。 ```css .min_width { min-width: 300px; /* 设置最小宽度 */ _width: expression_r(document.body.clientWidth ); /* IE专有 */ }...
"IE中利用CSS触发XSS-01" 在IE浏览器中,CSS可以用来触发XSS攻击。本节课程将介绍如何使用CSS来触发XSS。 CSS介绍 CSS(Cascading Style Sheets)是一种用来表现HTML或XML文件样式的计算机语言。CSS不仅可以静态...
标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...
总结来说,"好看的CSS按钮(兼容IE6)"意味着我们需要使用一些旧的CSS技巧和图片资源来创建在IE6上也能显示良好的按钮。这包括使用PNG图片模拟渐变和圆角,以及使用特定的IE滤镜来实现渐变效果。同时,HTML结构和CSS...
在网页设计和开发中,CSS Hack常常被用来解决不同浏览器之间的样式兼容问题,尤其是IE(Internet Explorer)浏览器的各个版本之间。"区分ie6 7 8 FF 的css hack 日常总结"这个主题集中讨论了如何针对IE6、IE7、IE8...
这种方法利用了IE6/IE7对CSS选择器的支持差异,可以通过不同的CSS规则来实现兼容性处理。 ```css #wrapper { width: 120px; /* FireFox */ *html #wrapper { /* IE6 fixed */ width: 80px; } *+...
### CSS兼容IE6, IE7和Firefox的技巧与总结 #### 概述 在Web开发过程中,确保网页在不同浏览器中的兼容性是一项重要的任务。早期的浏览器如Internet Explorer 6 (IE6)、Internet Explorer 7 (IE7) 以及 Firefox 对...
4. **条件注释**: IE特有的条件注释可以用来针对不同版本的IE加载特定的JavaScript库或CSS文件,这样可以针对不同浏览器提供定制的解决方案。例如: ```html <!--[if lt IE 9]> <script src="js/html5shiv.js"></...
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
* Firefox 和 IE 中的 default 样式不同,解决方法是设置合适的 CSS Reset * IE 中的 default 行高问题,解决方法是设置合适的 line-height 五、vertical-align 的问题 * Firefox 中可以实现 div 垂直居中的问题,...
- 不同的IE版本对HTML5特性和CSS3的支持程度不同,可能会影响到WebBrowser控件显示现代网页的效果。 - WebBrowser控件的安全性和隐私设置与系统IE浏览器相同,可能受到用户的限制。 - 由于IE版本的逐渐淘汰,对于...
总结来说,要让IE8及以下版本的浏览器兼容HTML5新标签和CSS3高级选择器,我们需要利用HTML5Shiv、Selectivizr、CSS3 Pie等工具,并合理地在页面中引入这些库。同时,对CSS和HTML进行适当的优化和调整,以适应旧版...
根据题目中的描述,我们可以总结出不同浏览器对于某些CSS Hack的识别特性: - **IE(Internet Explorer)**:IE能够识别`*`这个符号作为Hack的一部分。具体来说: - **IE6**能够识别`*`,但是不能识别`!important`...