这篇文章主要介绍了CSS浏览器兼容问题的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
CSS对阅读器的兼容性偶然让人很头疼,大约当你领略当中的才力跟情理,就会感应也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整顿了一下.对于web2.0的过火,请尽可能用xhtml格局写代码,而且DOCTYPE 影响 DIV CSS处理,作为W3C的标准,一定要加 DOCTYPE声明.
CSS才能
1.div的垂直居中标题 vertical-align:middle; 将行距增加到和整个DIV异样高 line-height:200px; 接下来插入翰墨，就垂直居中了。瑕疵是要牵制形式不要换行
2. margin加倍的标题问题 设置装备摆设为float的div在ie下配置的margin会愈加。这是一个ie6都具有的缝隙。意图方案是在这个div内中加上display:inline; 例如：
<#div id=”imfloat”>
响应的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> 放到 <body> 标签下，日后为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象素的裂痕 左边对象浮动，左边接纳外补丁的左边距来定位，左侧对象内的文本会离左边有3px的间距.
CSS代码：
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是要害}
HTML代码：
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
7.IE捉迷藏的问题 当div运用冗杂的时刻每个栏中又有一些链接，DIV等这个时刻容易发生捉迷藏的问题。 有些内容透露表现不进去，当鼠标决议这个周边是发现内容确确凿页面。 筹划方式：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面构造尽量容易。
8.float的div闭合;断根浮动;自顺应高度;
① 例如：
<#div id=”floatA” > <#div id=”floatB” > <#div id=” NOTfloatC” >
这里的NOTfloatC并不盼望继续平移，而是企望往下排。(其中floatA、floatB的属性也曾设置装备摆设为 float:left;) 这段代码在IE中毫无标题，标题出在FF。启事是NOTfloatC并不是float标签，必需将float标签闭合。
在<#div class=”floatB”> <#div class=”NOTfloatC”>之间加之 < #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反面做一个匹敌的后援,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比如我们要将page的后台配置成蓝色,以到达全部三栏的后援色调是蓝色的指数,可是咱们会发明随着left center right的向下拉长,而 page居然糊口生涯高度顽固,问题来了,缘故原由在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们该当如许整治
<div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div>
再嵌入一个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 {bac千克round-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box"> <p>p对象中的模式</p> </div>
办理方法：在P对象上下各加2个空的div对象CSS代码：
{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;
<style type="text/css">
<!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } -->
</style>
14.站点标准中定义id与class有什么判袂吗 一.站点规范中是不许可一再ID的,比喻 div id="aa" 不准予反复2次,而class 界说的是类,实际上可以无尽反复, 如许需要多次援用的定义便可使用他. 二.属性的优先级标题 ID 的优先级要高于class,看下面的例子 三.利便JS等客户端脚本,假定在页面中要对某个对象进行剧本哄骗,那么可以给他定义一个ID,不然只能利用遍历页面元素加之指定特定属性来找到它,这是相对虚耗年华资本,远远不如一个ID来得容易.
15. LI中形式超过长度后以省略号体现的方法 此方法实用与IE与OP阅读器
<style type="text/css">
<!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } -->
</style>
16.为甚么站点尺度中IE无法设置转动条色彩了 经管法子是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>
17.为何无奈定义1px支配高度的容器 IE6下这个题目是因为默认的行高组成的,希图的方法有了得多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎样样才能让层表现在FLASH之上呢 设计的门径是给FLASH设置装备摆设通明 <param name="wmode" value="transparent" />
19.怎样使一个层垂直居中于涉猎器中 这里我们使用百分比绝对定位,与外补钉负值的方法,负值的大小为其本身宽度高度除以二
<style type="text/css">
<!-- div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } -->
</style>
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS浏览器兼容问题的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
