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

Css浏览器兼容的解决方法

    来源: 互联网  发布时间:2014-10-07

    本文导语:  一、网页背景半透明网页背景半透明 代码如下:opacity:0.8;filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解决PNG图片半透明问题:#DIVname {      width: 300px;      height: 99px;      background: url('/tech-webtech/images/top.png') no-repeat to...

一、网页背景半透明
网页背景半透明

代码如下:

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解决PNG图片半透明问题:
#DIVname {
      width: 300px;
      height: 99px;
      background: url('/tech-webtech/images/top.png') no-repeat top;
      *background: none;
      *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='/tech-webtech/template/flower/images/top.png');
}
 

二、清除浮动
代码如下:

.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{display:inline-block}
.clear{height:0; line-height:0; font-size:0; overflow:hidden; clear:both; display:block;}
*html .clearfix{height:1%;}
.clearfix{display:block;}

三、浮动IE6双边距
1、为浮动元素使用display:inline;
2、IE6下3px间距bug:在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3px的间隔,给浮动层添加display:inline或设计-3px的间距来解决这个bug。
3像素间距bug
div+css中最小高度min-height
方法一:
代码如下:

#DIVname {
      min-height:150px;
      *height:auto!important;
      _height:150px;
       overflow:visible;
}

方法二:
代码如下:

#DIVname {
      min-height:1000px;
      _height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":"");
}

五、IE下z-index 的 bug
一般来讲,ie对父级的要求比较高,如果父级有position属性,但是没有给z-index属性,那默认都是0,所以不论子集里面有多高的z-index属性,都是没用的。
所以一般情况下,需要给包含z-index属性的父级一个z-index:1的属性,这样可以解决很多莫名其妙的问题。
六、IE6调整窗口大小的bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素就会固定不动了,解决方法是给body定义position:relative;就行了。
七、文字大小和行高不兼容
同样大小的相同字体,各浏览器下行高和大小不一样,需要设定line-height。
八、mirror margin bug
在IE6下,当外层元素内有float元素时,外层元素如定义margin-top:5px,将自动 生成margin-bottom:5px,padding也会出现类似问题,解决方案:外层元素设定border或float。
九、img下的留白
在html里面有:



时,会发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写:

后面两个标签要紧挨着。IE7下这个bug依然存在,解决方案:display:block。
十、图片和文字同行
大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。
失去line-height。
文字
,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。


    
 
 

您可能感兴趣的文章:

  • CSS hack浏览器兼容一览表
  • 处理CSS3跨浏览器兼容的工具 Prefixr
  • CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
  • 使css兼容IE8的小技巧
  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • css 兼容性问题this.style.cursor=''hand''
  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS
  • CSS兼容要点分析
  • 多浏览器css兼容分析小结
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • css浏览器不兼容原因分析及解决办法第1/2页
  • css实现兼容各个浏览器的技巧的代码
  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
  • CSS Hack 汇总速查手册浏览器兼容必会
  • 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
  • IE7 beta2的CSS兼容性
  • WEB前端 iis7站长之家
  • div+CSS 兼容小摘
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行
  • CSS布局中可以用javascript判断浏览器版本
  • CSS设置网页的字体 防浏览器浏览页面字体变形
  • css 跨浏览器实现float:center
  • CSS 浏览器的等宽空格问题解决
  • 针对浏览器隐藏CSS
  • 针对浏览器隐藏CSS之独孤九剑
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 解决ie动态修改link样式,import css不刷新的问题
  • 部署到iis后无法加载运行CSS文件的解决方法
  • 解决IE6 3像素Bug的css写法
  • CSS技巧DIV为空时占据空间的解决办法
  • IE6不能正常解析CSS文件问题的解决方法及原因分析
  • PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
  • 使用CSS解决文字环绕图片问题的代码
  • php ci框架中加载css和js文件失败的解决方法
  • CSS解决未知高度垂直居中的问题
  • php ci框架中加载css和js文件失败的原因及解决方法
  • 用div+css解决出现水平滚动条问题
  • css常见问题解决方法小结
  • xhtml+css网页制作中常见问题解决方法
  • 用CSS解决中英文混合字符串的截取省略问题的解决办法
  • asp.net2.0中css失效的解决方法
  • CSS解决未知高度垂直居中
  • 低版本IE正常运行HTML5+CSS3网站的3种解决方案
  • IE对CSS样式表的限制分析与解决方案
  • IE和FIREFOX下CSS的区别与解决方法第1/2页
  • 指定网页的doctype解决CSS Hacking方法总结
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍


  • 站内导航:


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

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

    浙ICP备11055608号-3