热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Css浏览器兼容的解决方法

本文总结一些常用的Css中的浏览器兼容性问题及解决方案

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

代码如下:

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解决PNG图片半透明问题:
#DIVname {
      width: 300px;
      height: 99px;
      background: url('images/top.png') no-repeat top;
      *background: none;
      *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='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起来。


推荐阅读
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举(ENUM)类型字段所有可能取值的方法,帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
author-avatar
小三coolboy958_818
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有