`
princeicelk
  • 浏览: 37380 次
  • 来自: ...
文章分类
社区版块
存档分类
最新评论

Opacity和css在IE6中的差异

阅读更多

    最近在IE6下调公司的程序,一些在firefox中很欢快的javascript和css到IE6中都挂了,不由得开始讨厌起IE来。说起来,我以前一直是IE的fans,但是它的许多处理方式也太不标准了。

    prototype.js中的setOpacity在IE6中有时候会失效,但是Effect.Opactity方法又很好用,对比后发现setOpacity要稍加修改,如下:

js 代码
  1. if(/MSIE/.test(navigator.userAgent)){   
  2.       element.setStyle({zoom: 1});   
  3.  }   
  4. Element.setStyle(element, {opacity: value});  

    这样在IE6中就可以自由实现显隐了。

    还有一些css的问题。不想自己敲了,从其他地方转过来:

1、针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:

css 代码
  1. #1 { color#333; } /* Moz */    
  2. * html #1 { color#666; } /* IE6 */    
  3. *+html #1 { color#999; } /* IE7 */   

那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

2、css布局中的居中问题 

主要的样式定义如下: 

css 代码
  1. body {TEXT-ALIGN: center;}   
  2. #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }   

说明:

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3、盒模型不同解释
 
css 代码
  1. #box{   
  2.    width:600px;   
  3.         //for   ie6.0-   w\idth:500px;   
  4.        //for  ff+ie6.0   
  5. }   
  6. #box{   
  7.    width:600px!important   
  8.             //for ff   
  9.     width:600px;   
  10.         //for  ff+ie6.0   
  11.     width /**/:500px;   
  12.        //for   ie6.0-   
  13. }   

4、浮动ie产生的双倍距离

css 代码
  1. #box{  float:left;   width:100px;   margin:0 0 0 100px; }  

 这种情况之下IE会产生200px的距离   display:inline;   //使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度、宽度、行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,……不可控制(内嵌元素);

#box{   display:block; //可以为内嵌元素模拟为块元素   display:inline; //实现同一行排列的的效果   diplay:table;

5、IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

css 代码
  1. #box{    width80px;    height35px;}
  2. html>body #box{    
  3.  widthauto;    
  4.  heightauto;    
  5.  min-width80px;   
  6.  min-height35px;
  7. }  

 

6、页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

放到 标签下,然后为div指定一个类:
然后CSS这样设计:
css 代码
  1. #container{   
  2.   min-width600px;   
  3.   width:e­xpression(document.body.clientWidth < 600? "600px""auto" );   
  4. }  

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、清除浮动

css 代码
  1. .hackbox{   
  2.        display:table;    
  3. //将对象作为块元素级的表格显示   
  4. }    
  5.   
  6. 或者    
  7.   
  8. .hackbox{   
  9.         clear:both;   
  10. }    

 或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的

css 代码
  1. ......#box:after{   
  2.     content".";   
  3.      displayblock;   
  4.     height: 0;   
  5.      clearboth;   
  6.      visibilityhidden;   
  7. }   

 

8、DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

css 代码
  1. #box{   
  2.     float:left;   
  3.     width:800px;}   
  4. #left{   
  5.     float:left;   
  6.     width:50%;}   
  7. #right{   
  8.     width:50%;   
  9. }   
  10. *html #left{   
  11.     margin-right:-3px;   
  12.    //这句是关键   
  13. }  
 
html 代码
  1. <DIV id=box>  
  2.     <DIV id=left></DIV>  
  3.    <DIV id=right></DIV>  
  4. </DIV  
 
   

 9、属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都不起作用,FF和OPera起作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的。

10、IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11、高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。例:

 

css 代码

  1. #box {background-color:#eee; }          
  2. #box p {margin-top20px;margin-bottom20pxtext-align:center; }   

        

分享到:
评论

相关推荐

    CSS在IE6下不起作用,没有效果

    要实现透明效果,开发者通常需要使用专为IE6设计的滤镜(如`filter: alpha(opacity=50)`),而CSS3的渐变和阴影等效果在IE6中则完全不可用。 此外,CSS层叠问题也是困扰IE6的一个常见问题。IE6的层叠上下文...

    IE6, IE7, IE8 CSS 兼容速查表

    1. **CSS盒模型差异**:IE6、7采用了独特的盒模型,其中`width`属性包含了边框和内边距,与W3C标准的盒模型不一致。在W3C盒模型中,`width`仅指内容区域宽度。开发者可以通过设置`box-sizing`属性来统一盒模型,或者...

    纯css二级导航 兼容ie6

    6. **CSS Hack**:由于IE6对CSS的解析存在一些差异,可能需要使用特定的CSS hack来修正样式,例如`_property`前缀只在IE6下生效。 7. **渐进增强**:为了保证在所有浏览器中的兼容性,可以采用渐进增强的策略,即为...

    CSS兼容IE8代码

    "CSS兼容IE8代码"是指针对IE8浏览器进行优化的CSS(层叠样式表)代码,以确保在IE8中能够正常显示和运行网页设计。在IE8中,由于其对CSS2.1标准的支持不完整,以及特有的盒模型、滤镜等特性,常常会导致现代网页设计...

    CSS插件-CSS插件 ieCSS插件 ie

    "CSS插件 ie"可能是指专门针对Internet Explorer(简称ie)浏览器的一类插件,因为Internet Explorer在历史上曾是广泛使用的浏览器,但其对CSS的支持与其他现代浏览器相比存在一些差异和兼容性问题。 在标题和描述...

    js、css在IE和火狐上的差异和处理方法

    以下是对"js、css在IE和火狐上的差异和处理方法"的详细解释。 1. **CSS差异**: - **盒模型**:IE采用的是自己的盒模型,将边框和内填充包含在元素的宽度和高度中,而Firefox遵循W3C标准盒模型,宽度和高度不包括...

    css 在ie7与ie8下的差别

    然而,不同浏览器对CSS的支持程度和解析方式有所不同,尤其是对于较老的Internet Explorer(IE)浏览器,如IE7和IE8,它们在CSS的实现上存在显著的差异。这些差异可能会给开发者带来额外的挑战,尤其是在追求跨...

    CSS在Internet Explorer 6, 7 和8中的差别

    - F) `:before` 和 `:after` 伪元素:这两个伪元素在IE6中不可用,但IE7和IE8支持,不过需要通过`filter`属性的`progid:DXImageTransform.Microsoft.Shadow`等非标准方法来实现。 3. **属性支持** - IE6、7、8对...

    css+div 在IE中兼容

    Internet Explorer(以下简称IE)浏览器由于其版本迭代过程中对CSS支持的不一致性,导致在开发基于CSS布局的网站时,需要特别注意跨浏览器兼容性,尤其是针对早期的IE版本(如IE6、IE7)。本文将深入分析如何通过...

    div+css 完全兼容 样式兼容性 ie6 ie7 IE8 IE9 和firefox方法

    以上所述只是部分解决`div+css`在IE6-9和Firefox兼容性问题的方法,实际开发中可能还需要针对具体情况进行调整。不断学习和实践,才能更好地掌握兼容性问题的解决技巧。阅读提供的资料如"十年积累)div+css 完全兼容...

    css 兼容性 ie6, ie7, ie8

    在前端开发过程中,CSS(Cascading Style Sheets)的兼容性问题一直是开发者面临的挑战,尤其是在处理Internet Explorer(IE)浏览器的早期版本时,如IE6、IE7和IE8。这些浏览器对CSS标准的支持并不完全,导致在不同...

    CSS在ie firefox中 样式问题

    本文将深入探讨在IE和Firefox中常见的CSS样式问题及其解决方案。 1. **盒模型差异** - IE6、7采用的是"怪异盒模型",边距和内填充计算在元素宽度内,导致实际宽度与声明宽度不符。 - Firefox遵循W3C标准的"正常盒...

    ad.css for IE

    综上所述,"ad.css for IE"是专为解决IE浏览器显示广告和浮窗问题而设计的CSS文件,通过各种技术手段,如CSS Hack、特定的属性设置等,确保在IE8以上的版本中网站能够呈现出良好的视觉效果和用户体验。在实际应用中...

    IE6 -- IE8浏览器CSS兼容性查询手册【gif格式】

    但遗憾的是,IE6、IE7和IE8在实现CSS规范时存在许多差异,甚至有些特性在某些版本中是独有的或者不支持的,比如滤镜(Filters)、盒模型(Box Model)以及浮动元素的处理等。 1. 盒模型:IE6和IE7默认采用“怪异盒...

    IE5,IE6,IE7,IE8的css兼容性列表

    在互联网发展的早期,微软的Internet Explorer(IE)浏览器曾经占据主导地位,尤其是IE5、IE6、IE7和IE8这几个版本。每个版本都有其独特的特性和对CSS(层叠样式表)的支持程度,这对于前端开发者来说是必须要了解的...

    IE6_IE7_IE8 CSS 兼容速查表

    然而,不同的浏览器对于CSS的支持程度和解析方式可能存在差异,尤其是在早期的浏览器版本,如IE6、IE7和IE8。这些老版本的Internet Explorer浏览器在处理CSS时存在诸多不兼容性问题,给开发者带来了不少困扰。本篇...

    CSS兼容IE和Firefox的技巧集合

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的布局和样式。然而,由于不同的浏览器对CSS规范的实现存在差异,特别是Internet Explorer(IE)与Firefox,开发者常常面临兼容性...

    CSS实现兼容IE6-8的背景或边框半透明.zip

    此外,项目可能还涉及CSS类的切换,以在不支持滤镜的浏览器中利用CSS3的`transition`和`opacity`来实现平滑的透明度变化。在IE6-8中,可能需要通过JavaScript手动模拟这种过渡效果。 总结来说,这个项目展示了如何...

    DIV+CSS网页中IE和火狐兼容问题的整理

    然而,在实际应用中,由于不同浏览器的解析和渲染机制存在差异,尤其是在IE(Internet Explorer)和Firefox之间,这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

Global site tag (gtag.js) - Google Analytics