当前位置:  编程技术>WEB前端

兼容各个浏览器的技巧

    来源: 互联网  发布时间:2014-09-06

    本文导语:  1,盒解释器的不同解释. #box{   width:600px;        //for   ie6.0-   width:500px;       //for  ff+ie6.0}#box{    width:600px!important            //for ff    width:600px;        //for  ff+ie6.0    width /**/:500px;       //for   ie6.0-...

1,盒解释器的不同解释.

#box{   width:600px;        //for   ie6.0-   width:500px;       //for  ff+ie6.0}#box{    width:600px!important            //for ff    width:600px;        //for  ff+ie6.0    width /**/:500px;       //for   ie6.0-}
2,在ie中隐藏css,使用子选择器

html>body #box{     }
3,只有ie识别

*html #box{     }
4,在ie/win有效而ie/max隐藏,使用反斜杠

/* */
#box{ }
5,给ie单独定义样式 这里更加详细的说明

6,浮动ie产生的双倍距离

#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;   //for ff,模拟table的效果}
7,for oprea only

@media all and (min-width:0px){/* opera */#box{  }}
8,IE与宽度和高度的问题

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

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

#box{    width: 80px;    height: 35px;}html>body #box{    width: auto;    height: auto;    min-width: 80px;    min-height: 35px;}
9,页面的最小宽度

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

放到 标签下,然后为div指定一个类:


然后CSS这样设计:
#container{  min-width: 600px;  width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度:

#container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";}
10,清除浮动

.hackbox{       display:table; //将对象作为块元素级的表格显示}或者.hackbox{        clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。-------这种的最麻烦的......

#box:after{    content: ".";     display: block;    height: 0;     clear: both;     visibility: hidden;}
11,DIV浮动IE文本产生3象素的bug

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

#box{    float:left;    width:800px;}#left{    float:left;    width:50%;}#right{    width:50%;}*html #left{    margin-right:-3px;   //这句是关键}
   HTML代码

   
  

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

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

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

 待续...

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=592516

 


    
 
 

您可能感兴趣的文章:

  • 通过javascript实现DIV居中,兼容各浏览器版本
  • CSS hack浏览器兼容一览表
  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
  • 处理CSS3跨浏览器兼容的工具 Prefixr
  • Iframe自适应高度兼容ie,firefox多浏览器
  • 都是IE惹的祸多浏览器兼容问题
  • php文件下载代码(多浏览器兼容、支持中文文件名)
  • 兼容ie6浏览器的php下载文件代码分享
  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • 多浏览器css兼容分析小结
  • jquery禁用右键、文本选择功能、复制按键的代码(兼容多浏览器)
  • Css浏览器兼容的解决方法 iis7站长之家
  • jQuery右下角弹出广告代码兼容多浏览器
  • php下载文件代码(兼容ie6浏览器)
  • jquery div拖拽效果(兼容浏览器)
  • css浏览器不兼容原因分析及解决办法第1/2页
  • css实现兼容各个浏览器的技巧的代码
  • Css浏览器兼容的解决方法
  • Web系统通过EXE文件实现读取客户电脑MAC等硬件信息且兼容非IE浏览器
  • CSS Hack 汇总速查手册浏览器兼容必会
  • 使css兼容IE8的小技巧
  • 让python同时兼容python2和python3的8个技巧分享
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • IE11设置IE兼容性视图及提升Windows 8.1中IE11兼容性的相关设置
  • 请问各位老大,各种服务器(比如HP,IBM,DELL等,及各种小型机)都兼容什么操作系统,以及与磁阵的兼容性问题
  • 关于.so库不同版本兼容的问题
  • Linux 的向后兼容性
  • fedora16是兼容32位库的吗
  • 标准兼容的 WYSIWYG 编辑器 XStandard
  • IPv6兼容性诊断工具 IPv6 CARE
  • 请问ECHO命令与GETOPT函数的行为如何不兼容?
  • 我所希望的Java的跨平台特性及兼容性。
  • 嵌入式,2.6还是2.4 (向下兼容吗)?
  • 安装ZendOptimizer的时候提示与PHP5.3.5不兼容!?
  • Ylmf Os 可以兼容哪些软件?
  • 兼容 tar 的归档工具 btar
  • GTK+的Newt兼容库 gNewt
  • 兼容式屏幕阅读器 YASR
  • 兼容 WSGI 的 Web 服务器 FAPWS
  • 解决IE兼容性问题 IE7.JS
  • 关于程序兼容性的问题:(谢谢)
  • 打算买个新本子,考虑Linux兼容性
  • ld与.a后缀的静态库 不兼容
  • 兼容相容IC不同模组的LCD


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3