IE与FF不兼容网页布局CSS问题解决方案
创始人
2024-07-13 09:11:18
0

本文向大家简单介绍一下IE与FF不兼容网页布局CSS问题解决方法,主要包括用!important解决IE和Mozilla的布局差别,Li中内容超过长度后以省略号显示的方法 等内容,相信通过本文的学习你对解决IE与FF不兼容网页布局CSS问题有一定的认识。

IE与FF不兼容网页布局CSS问题

CSS网页布局中往往会出现很多IE与FF不兼容问题,下面整理了一些常见的可能及其解决的办法!

1、用!important解决IE和Mozilla的布局差别  

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,
例如,我们定义这样一个样式: 

  1. .colortest{border:20pxsolid#60A179  
  2. !important;border:20pxsolid#00F;padding:30px;width:300px;}   

在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色;在IE中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色。

2、解决超链接访问过后hover样式不显示的问题
  
改变CSS属性的排列顺序:先后顺序标准应为:  
a:link—a:visited—a:hover—a:active

3、Li中内容超过长度后以省略号显示的方法 

  1. http-equiv="Content-Type"/> 
    •  
    • CSSWebDesign我爱CSS-Web标准化
    •  
    • web标准常见问题大全
     
  2.  

 4、margin和padding定义尺寸的缩写  

margin:3px——表示所有边都是3px;  
margin:3px5px——表示top和bottom的值是3px,right和left的值是5px  
margin:3px5px7px——表示top的值是3,right和left的值是5,bottom的值是7  
margin:3px5px7px5px——四个值依次表示top,right,bottom,left;上右下左。

5、解决IE不能正确显示透明PNG——header内加入代码

  1.  
  2. functioncorrectPNG(){for(vari=0;i
  3. varimg=document.images[i]  
  4. varimgName=img.src.toUpperCase()  
  5. if(imgName.substring(imgName.length-3,imgName.length)=="PNG")  
  6. {varimgID=(img.id)?"id='"+img.id+"'":""  
  7. varimgClass=(img.className)?"class='"+img.className+"'":""  
  8. varimgTitle=(img.title)?"title='"  
  9. +img.title+"'":"title='"+img.alt+"'"  
  10. arimgStyle="display:inline-block;"+img.style.cssText  
  11. if(img.align=="left")  
  12. imgStyle="float:left;"+imgStyle  
  13. if(img.align=="right")imgStyle="float:right;"+imgStyle  
  14. f(img.parentElement.href)imgStyle="cursor:hand;"+imgStyle  
  15. varstrNewHTML="
  16. +"style=\""+"width:"+img.width+"px;  
  17. height:"+img.height+"px;"+imgStyle+";"  
  18. +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
  19. +"(src=\'"+img.src+"\',sizingMethod='scale');\">"  
  20. img.outerHTML=strNewHTMLi=i-1}}}  
  21. window.attachEvent("onload",correctPNG); 
  22.  
  23.  

6、ul在和IE下表现不同 
 
使用(padding:0;margin:0;list-style:inside;)  
或者(padding:0;margin:0;list-style:none;)实现兼容

7、BOX模型在firefox和IE中的解释相差2px的解决方法

  1. div{margin:30px!important;margin:28px;}    
  2.  

注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important,所以在IE下其实解释成这样: 

  1. div{maring:30px;margin:28px}   
  2.  

重复定义的话按照***一个来执行,所以不可以只写margin:XXpx!important;

8、margin的默认效果  

div里的内容,ie默认为居中,而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;

【编辑推荐】

  1. DIV CSS网站布局八个小技巧
  2. JavaScript动态创建div属性和样式
  3. DIV CSS建站对浏览器兼容性和注意事项
  4. CSS2.0中page-break-after属性用法
  5. 解读DIV CSS网页布局中CSS无效十个原因

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛,可以帮助开发人员处理各种程序中的需求,而且还能对移动设备进行...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...