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

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; }   

        

分享到:
评论

相关推荐

    一个采用MVC架构设计、Java实现的泡泡堂游戏。.zip

    一个采用MVC架构设计、Java实现的泡泡堂游戏。zip是一个基于Java语言开发的项目,旨在通过实践帮助初学者理解MVC(Model-View-Controller)设计模式在游戏开发中的应用。该项目不仅涵盖了游戏逻辑和用户交互,还注重代码结构和可维护性。项目的核心是MVC架构,它将应用程序分为三个主要组件:模型(Model)、视图(View)和控制器(Controller)。模型负责处理数据和业务逻辑,视图负责展示数据,控制器则作为两者之间的桥梁,处理用户输入并更新视图。这种设计模式有助于提高代码的可读性和可维护性,同时也使得项目的扩展和修改变得更加容易。该资源适合初学者学习,因为它的难度适中,功能清晰。通过这个项目,开发者可以深化对Java语言的理解,掌握MVC模式的应用,同时提升在游戏开发方面的能力。此外,项目源代码是公开的,初学者可以直接下载使用,查看源代码,理解项目的实现方式,也可以在此基础上进行修改和扩展,以进一步提高自己的编程技能。总之,“一个采用MVC架构设计、Java实现的泡泡堂游戏.zip”是一个宝贵的学习资源,它为初学者提供了一个实践平台,帮助他们在游戏开发中学习和成长。

    基于java的坦克大战游戏.zip

    基于Java的坦克大战游戏是一款经典的射击类游戏,通过Java编程语言实现。这款游戏不仅涵盖了面向对象编程、多线程处理和图形绘制等关键技术,还运用了Socket进行客户端与服务器端的通信,使玩家能够通过网络进行对战。游戏中,玩家需要操纵坦克守卫基地,同时尽可能摧毁敌方坦克,并有机会获得超级武器来提升坦克属性。其丰富的功能模块和高度互动性,使其成为学习和实践Java编程技术的优秀资源。

    原版apsw-3.39.4.0-cp311-cp311-win_arm64.whl-下载即用直接pip安装.zip

    安装前的准备 1、安装Python:确保你的计算机上已经安装了Python。你可以在命令行中输入python --version或python3 --version来检查是否已安装以及安装的版本。 个人建议:在anaconda中自建不同python版本的环境,方法如下(其他版本照葫芦画瓢): 比如创建python3.8环境,anaconda命令终端输入:conda create -n py38 python==3.8 2、安装pip:pip是Python的包管理工具,用于安装和管理Python包。你可以通过输入pip --version或pip3 --version来检查pip是否已安装。 安装WHL安装包 1、打开命令行(或打开anaconda命令行终端): 在Windows上,你可以搜索“cmd”或“命令提示符”并打开它。 在macOS或Linux上,你可以打开“终端”。 2、cd到whl文件所在目录安装: 使用cd命令导航到你下载的whl文件所在的文件夹。 终端输入:pip install xxx.whl安装即可(xxx.whl指的是csdn下载解压出来的whl) 3、等待安装完成: 命令行会显示安装进度,并在安装完成后返回提示符。 以上是简单安装介绍,小白也能会,简单好用,从此再也不怕下载安装超时问题。 使用过程遇到问题可以私信,我可以帮你解决! 收起

    钢材表面缺陷检测数据集

    钢材表面缺陷检测数据集是一个专门针对钢材表面缺陷检测的深度学习训练与测试资源。这个数据集的创建旨在推动钢铁工业中自动化检测技术的发展,提高生产效率和产品质量。它包含了大量经过精心标注的真实钢材图像,用于训练和验证深度学习模型,特别是针对目标检测任务的算法,如YOLO(You Only Look Once)。 一、表面缺陷检测的重要性: 在钢铁制造过程中,表面缺陷可能会影响材料的性能和寿命,甚至导致结构的失效。因此,及时、准确地检测出这些缺陷至关重要。传统的检测方法依赖于人工视觉检查,成本高且易受主观因素影响。随着机器学习和深度学习技术的进步,自动化检测已成为解决这一问题的有效途径。 二、深度学习在表面缺陷检测中的应用: 1. YOLO(You Only Look Once):YOLO是一种实时的目标检测系统,以其快速的检测速度和相对较高的准确性而受到广泛关注。在NEU-DET数据集中,YOLO可以被训练来识别并定位钢材表面的缺陷,如裂纹、锈斑、凹痕等。 2. 特征提取:深度学习模型,如卷积神经网络(CNN),能自动从图像中学习高级特征,这对于识别复杂的表面缺

    基于java的微信小程序健身房私教预约系统答辩PPT.pptx

    基于java的微信小程序健身房私教预约系统答辩PPT.pptx

    astropy-5.0.4-cp310-cp310-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    基于java的微信小程序中国剪纸微信小程序的设计与实现答辩PPT.pptx

    基于java的微信小程序中国剪纸微信小程序的设计与实现答辩PPT.pptx

    VB程序实例-保存窗口设置.zip

    基于VB的程序实例,可供参考学习使用

    基于java的微信小程序微信平台签到系统的设计与实现答辩PPT.pptx

    基于java的微信小程序微信平台签到系统的设计与实现答辩PPT.pptx

    astropy-4.2-cp36-cp36m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    aggdraw-1.3.14-cp38-cp38-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    兔兔答题源码 在线答题神器 一款前后端开源的移动端答题系统.zip

    依赖包安装 由于node的包非常大,所以提供源代码的时候就不提供第三方的依赖包,需要自己安装。在项目目录下执行npm i即可安装。 1、PHP的版本必须在8.2x,至于更高的版本,例如8.3x版本以及更高,系统还未完全测试过,生产环境不建议直接使用。 2、MySQL的版本必须是>= 5.7.x的版本,低于5.7.0的版本100%是无法使用的。 3、Redis的版本没有过多的要求,不过推荐使用7.0以及更高的版本。 4、管理端使用的Vue3的版本开发,同时使用了Element Plus的版本, 所以需要使用Node.js的版本推荐是>= 16.x的版本。同时推荐生产环境,编译打包成静态文件运行。 安装教程: 域名配置,打开utils目录下的request.js文件,按照文件说明配置实际的API地址。 App.vue里面的examUpdateTemplateId改成自己的微信小程序订阅模板id。 代码中有涉及到开发者的二维码图片,根据不同的地方替换成自己即可。 小程序配置,找到manifest.json文件,将下面的appid改成你自己的小程序appid。 “mp-we

    JSP基于SSM小区物业管理系统毕业源码案例设计.zip

    JSP基于SSM小区物业管理系统毕业源码案例设计 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    VB程序实例-程序菜单的隐藏&显示.zip

    基于VB的程序实例,可供参考学习使用

    基于Java实现的黄金矿工小游戏.zip

    本资源是一个基于Java实现的黄金矿工小游戏项目,旨在帮助初学者通过实践巩固Java编程知识。游戏包含多个功能模块,如窗口绘制、图片绘制、红线摇摆及抓取判定等,并采用双缓存技术解决画面闪动问题。此外,还实现了金块和石块的随机生成与抓取机制、积分设置、关卡设置以及商店购物等功能。本项目适合刚入门或有一定基础的Java学习者,通过完成这个项目,可以提升面向对象编程的理解和应用能力,同时增强对Java基础知识的掌握。

    盒子模型及盒子布局中的

    清除默认样式

    基于java的社区文化宣传网站答辩PPT.pptx

    基于java的社区文化宣传网站答辩PPT.pptx

    Trustwave DbProtect:高级查询与自定义报告技术教程.docx

    Trustwave DbProtect:高级查询与自定义报告技术教程.docx

    原版apsw-3.46.1.0-cp312-cp312-win_arm64.whl-下载即用直接pip安装.zip

    安装前的准备 1、安装Python:确保你的计算机上已经安装了Python。你可以在命令行中输入python --version或python3 --version来检查是否已安装以及安装的版本。 个人建议:在anaconda中自建不同python版本的环境,方法如下(其他版本照葫芦画瓢): 比如创建python3.8环境,anaconda命令终端输入:conda create -n py38 python==3.8 2、安装pip:pip是Python的包管理工具,用于安装和管理Python包。你可以通过输入pip --version或pip3 --version来检查pip是否已安装。 安装WHL安装包 1、打开命令行(或打开anaconda命令行终端): 在Windows上,你可以搜索“cmd”或“命令提示符”并打开它。 在macOS或Linux上,你可以打开“终端”。 2、cd到whl文件所在目录安装: 使用cd命令导航到你下载的whl文件所在的文件夹。 终端输入:pip install xxx.whl安装即可(xxx.whl指的是csdn下载解压出来的whl) 3、等待安装完成: 命令行会显示安装进度,并在安装完成后返回提示符。 以上是简单安装介绍,小白也能会,简单好用,从此再也不怕下载安装超时问题。 使用过程遇到问题可以私信,我可以帮你解决! 收起

    使用Java开发的一个小的飞机大战游戏.zip

    资源简介本资源是一个使用Java语言开发的小型飞机大战游戏,旨在为学习者提供一个完整的游戏开发案例。项目包含全部源代码及相关资源文件,适合初学者和有经验的开发者学习和参考。通过本项目,学习者可以深入了解Java编程、面向对象设计、图形渲染及事件处理等核心概念,并掌握游戏开发的基本技巧。该项目涵盖了从游戏设计到实现的全过程,包括游戏窗口创建、游戏元素(如飞机、子弹、敌机)的设计、碰撞检测、计分系统以及用户交互等功能。通过分析和研究这些代码,学习者不仅可以提升编程技能,还能理解游戏开发的基本原理和流程。总之,这个基于Java的飞机大战游戏项目是一个宝贵的学习资源,能够帮助学习者在实践中掌握Java编程和游戏开发的核心知识。

Global site tag (gtag.js) - Google Analytics