CSS兼容IE与火狐浏览器超强兼容代码

如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼容了,其他的就是一些浏览器的BUG了,发一些技巧给你看看,或许有用。

CSS技巧

1、div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

2、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如:

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

3、浮动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;

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

5、页面的最小宽度

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的判断来实现最小宽度。

6、DIV浮动IE文本产生3象素的bug

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

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

7、IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单

8、float的div闭合;清除浮动;自适应高度;

① 例如:这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left

这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签 闭合。在 之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会 产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。

例如某一个wrapper如下定义:

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!)

关于clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

/* Clear Fix */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}

11、高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。

例:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12、IE6下为什么图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13、如何对齐文本与文本输入框

加上 vertical-align:middle;

14、web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题

ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单

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

此方法适用与IE与OP浏览器

16、为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

17、为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18、怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

19、怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

相关阅读:

php header跳转及函数详细说明

PHP数组的序列化serialize及unserialize

PHP时间函数之高级应用

PHP实现在字符标点处截断文字的函数

PHP之substr_replace指定两位置间的字符替换

php URL编码解码函数urlencode和urldecode

PHP的CURL库功能抓取网页、POST数据

php的mysqli和mysql区别分析

数据库SQL如何随机提取数据库记录

数据库Mysql字段的存储长度

MySQL以utf8存储实现gbk输出

Windows 2003下MySQL无法停止、无法启动解决方法

CSS清除浮动的方法

经典的css技巧(推荐常用)

php 兼容火狐,PHP_CSS兼容IE与火狐浏览器超强兼容代码,如何让你写的代码更兼容火狐 - phpStudy...相关推荐

  1. php 兼容火狐,HTML_总结CSS中火狐浏览器与IE浏览器的兼容代码,如何让你写的代码更兼容火狐 - phpStudy...

    总结CSS中火狐浏览器与IE浏览器的兼容代码 如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了, ...

  2. 如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器

    关于点聚的weboffice ActiveX插件的使用在IE下只需要安装对应weboffice.ocx插件即可实现在线文档编辑.对于非IE如谷歌.火狐浏览器来说就有些不同了的,如果想要兼容谷歌和火狐需 ...

  3. 最新ie图标变灰css,网站变灰的CSS代码(兼容火狐、Chrome、IE系浏览器)——w3cdream|前端学习-开发...

    之前找了一些代码在火狐下无效,于是百度谷歌一起上,终于被我找到了支持火狐.谷歌等浏览器的把网页变黑白代码: /* 网站黑白代码 */ html{ filter: grayscale(100%); -w ...

  4. 记-网页上某些图片用 火狐 、谷歌、360极速模式等都可以正常显示。但是用 ie、360兼容模式 却不能正常显示。浏览器报DOM7009: 无法解码 URL 处的图像

    一.问题描述 网页上某些图片用 火狐 .谷歌.360极速模式等都可以正常显示.但是用 ie.360兼容模式 却不能正常显示.浏览器报DOM7009: 无法解码 URL 处的图像. 二.原因 Conte ...

  5. IE浏览器即将“退役”,银行、学校的老网站们如何兼容Chrome、Firefox和360等浏览器?

    微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Windows 10系统将不微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Window ...

  6. h5页面置灰处理源代码,兼容IE(优雅降级提供下载浏览器链接)

    h5页面置灰处理源代码 兼容IE(优雅降级提供下载浏览器链接) 马上要到清明节了,有朋友找我要给页面置灰的方案和方法,在网上搜的方法基本都是在Chrome上直接置灰,在ie上就有点难处理了:我找了下之 ...

  7. 浏览器实现pdf下载、ms http下载、IE不兼容

    浏览器实现pdf下载.ms http下载.IE不兼容 pdf下载 后台返回MemoryStream流到JS,JS接收流触发浏览器下载. 步骤: 设置Response.ContentType = &qu ...

  8. L2 元年,Arbitrum Nitro 升级带来更兼容高效的开发体验

    Arbitrum 作为基于以太坊 L2 扩展解决方案,自去年8月底上线以来,凭借低成本和高速度的用户体验,同时保持去信任化的安全优势,又与 EVM 完全兼容,迅速获得了广大用户和开发者的青睐.截止目前 ...

  9. waterfox(水狐)——火狐的非官方64位版浏览器(汉化)

    64位系统下的64位应用毫无疑问会带来更好的性能,Mozilla最近显然是采用了互联网快速迭代的开发模式,Firefox在版本更新方面要向Google的Chrome看齐了.但64位的FireFox却始 ...

最新文章

  1. MalformedObjectNameException: Invalid character '' in value part of property
  2. 【原创】Aspose.Words组件介绍及使用—基本介绍与DOM概述
  3. 图像检索:基于形状特征的算法
  4. 云原生时代下,容器安全的“四个挑战”和“两个关键”
  5. k8s kubebuilder系列开发 — 编写自定义资源和Reconciliation循环
  6. 中关村win11 32位全新官方版镜像v2021.07
  7. ImportError: cannot import name 'pyopenpose' from 'openpose'错误解决方法
  8. unity3d连接数据库
  9. 读取指定文件夹限定文件
  10. jsp页面显示富文本框内容
  11. Asp.Net MVC部暑托管服务器iis7提示403错误解决方法
  12. spring-第八篇之容器中的bean的生命周期
  13. H.264编码实验--JM18.6H264Visa
  14. Python + Selenium自动化测试
  15. 2020年 - 年终总结
  16. WOSADO悦瞳获近3亿人民币融资;研卤堂获数千万人民币A轮融资
  17. C/C++ Linux 出错处理函数(strerror 与 perror)
  18. 做一名有幸福感的计算机教师,做一名具有幸福感的教师
  19. 科目三考试经验与技巧——长春长德科目三考场
  20. ​CrossOver2022Mac或Linux​系统无缝切换

热门文章

  1. 工业网关控制器CK-GW06-E01与欧姆龙 PLC配置说明
  2. CarSim仿真快速入门(三)
  3. 欢迎查看Vue总结知识
  4. 我对北理FTP联盟的建议
  5. 北京超级计算机中心,超级计算机“元”上线 北京超云中心正式服役
  6. 2021年这些高频面试知识点最后再发一次,跳槽薪资翻倍
  7. QFont/QFontInfo方法功能(QT5.12)
  8. cdn有几种加速方式
  9. 飞飞影视系统php版怎么进,飞飞影视系统PHPVOD搬家图文教程
  10. E融汇移动端灰度发布功能演进