今天重点介绍一下CSS中所涉及到的兼容问题,学习CSS也有一段时间了,一直在想去写些什么东西,也许是自己太懒,也许是根本不知道从何入手,终于下定了决心,2014,马年了,还是勤奋点,权当做下笔记吧,方便以后查看。
一、样式属性引发的问题
1 margin
1.1 块属性元素的上下margin会产生叠压
1.2 内嵌元素不支持上下的margin、padding
(以上两点没啥好说的,各大浏览器的表现是一致的)
1.3 子级元素的margin-top会传递给父级,除非遇到border或者padding,否则一直往更远的父级传递
针对这种情况,有如下几种解决方案
1.3.1 让父级浮动
1.3.2 父级增加border或着padding,并且一定要触发IE下的haslayout,否则在IE6、IE7下会产生margin消失的现象
1.4 IE6下双边距bug
产生条件:a、IE6 ;b、块属性元素;c、浮动;d、横向margin
既然知道了成立条件,那么只需要破除一个即可,综合以上,解决方案便是display
:
inline
;
2 border
除了solid类型的border外,其他两种都是有兼容性问题的,针对虚线 dashed类型的边框,正常使用时,一般不会将边框设置的很大,在border 宽度小的时候,表现还是基本一致的。IE6下是不支持1像素点线的 即 dotted (解决方案 :采用背景平铺)
3 height
IE6下有个最小高度19px的限制,即如果元素高度小于19px,那么表现形式为19px
针对这种情况,有如下2种解决方案
3.1 通过设置当前元素的
font-size
:
0
;
来实现,不过该种方式只能将高度最小调整为2px
3.2 通过
overflow
:
hidden
;来控制最小高度,该种方式可以完美解决
4 inline-block
IE6/7下不支持块属性标签的 display:
inline-block
;
但是注意该属性可以激发IE下的hasLayout,很明显这可以用在加在父级上来清除浮动的目的,不过不建议(代码换行会被解析)
二、标签引发的问题
其实这个问题还没有太多可以说的地方,关键就是注意标签嵌套规范即可
1)、 p,内嵌元素,dt中尽量不要嵌套块属性元素,即便是通过display:
inline
;转换过来的块
2)、拥有父子级关系的标签中,不用使用除了子级元素之外的其他任何标签,比如ul、ol下必然是li,虽然用了除此之外的其他标签仅仅针对于html和css来讲,不会产生怎样的影响,然后再后期js来获取元素的时候,遵循节点的原则,也就是所谓的DOM树结构,浏览器解析时会认为ul、ol下的子节点只可能是li,如果出现了其他标签,则可能出现找不到的情况
三、浮动引发的兼容问题
1)、让两个块属性元素在同行内显示,一般的做法就是两个块统一添加浮动,然而很多人会做如下处理,左边的块浮动,右边的div不设置浮动,靠后边元素挤上来实现类似的效果,很多人可能考虑写这样的代码
<style> .left{width:100px;height:100px;background:red;float:left;} .right{width:100px;height:100px;background:green;margin-left:100px;} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body>
标准浏览器下,不会有什么问题,然而在IE6下两个块之间则会产生3px的间隙,这个问题是没法解决的,所以如果实现类似的效果,请加浮动。
2)、关于li的问题
li本身没有浮动,假设页面结构如下
<style> .list { padding: 0; list-style: none; width: 300px; margin: 100px auto; } .list li { height: 30px; line-height: 30px; border: solid 1px #000; } a {float: right;} </style> </head> <body> <ul class="list"> <li> <span>测试一</span> <a href="#">测试一</a> </li> <li> <span>测试二</span> <a href="#">测试二</a> </li> <li> <span>测试三</span> <a href="#">测试三</a> </li> </ul> </body>
此时,IE6/7会产生链接折行问题,解决此问题的方法:左侧元素浮动,与此同时,则会产生新的问题
如果li本身没有浮动,而下面所有子元素已经浮动,那么每个li之间在IE6/7下则会产生4px的间隙BUG,解决方案:要么li浮动,要么通过属性 vertical-align:
top
;垂直对齐方式来去除间隙
另外,如果li间隙问题和最小高度同时出现,解决方案只有一个,那就是li本身浮动,并且加上overflow
:
hidden
;来控制最小高度问题
3)、IE6下文字溢出BUG
<body> <div style="width:400px"> <div style="float:left"></div> <!-- --> <div style="float:right;width:400px">↓这就是多出来的那只猪</div> </div>
放在IE6下则会看到明显的文字重复溢出效果
这个问题的解决方案也有很多种,产生原因:注释放在了两个浮动的元素之间
a、去除文字区域的宽度,或者调整宽度与父级之间大于3px的宽度 (小于父级至少3px的宽度)
b、文字溢出的div后边加上<br/>
c、既然和注释关系,那么我们完全可以将注释包含在一个<div></div>中来解决,个人建议可以使用该种解决方式
三、定位引发的兼容问题
定位方式 相对定位、绝对定位、固定定位
1)、IE6 7父级的
overflow
:
hidden
;是包不住子级的relative (该种情况解决的话,父级加上定位即可,三种定位均可,不过考虑到相对定位不会对元素产生影响,一般拿相对定位来处理)
2)、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差(解决方案:避免绝对定位父级的奇数宽高)
3)、IE6下不支持固定定位(IE6下样式为绝对定位)
我们可以通过以下几种方式来模拟固定定位
a、通过调整html和body高度,并将滚动条加给body的方式来解决固定定位
如下代码
<style> html{height:100%;overflow:hidden;} body{overflow:auto;height:100%;marign:0;} .div{width:50px;height:50px;position:fixed;_position:absolute;border:solid 1px green;right:20px;bottom:100px;} .box{height:2000px;} </style> </head> <body> <div class="box"> <div class="div">测试一下</div> </div> </body> </html>
其实该种方式原理很简单,默认页面滚动条是在document上,设置html与可视区同等高度,然后通过
overflow
:
hidden
;截掉超出部分,然后body设置于可视区同等高度,内容超出则出现滚动条,此时滚动条是body上,页面的中内容元素又设置了绝对定位,没有定位父级,那么此时是相对了文档进行定位,又因为文档本身在拉动滚动条时没有变化,所以实现了固定定位的效果。
b、利用css HACK来处理
如下代码
<style> .box{height:2000px;} .div{width:50px;height:50px;position:fixed;border:solid 1px green;left:100px;top:100px;_position:absolute; _top:expression(eval(document.documentElement.scrollTop+100));background:red;} </style> </head> <body> <div class="box"> <div class="div">测试一下</div> </div>
虽然以上两种方式都可以解决这个问题,但是引发的问题也比较多,扩展性也不是很好,而且在IE6下拉动滚动条时,会出现难看的抖动,因此还是建议利用JS来实现固定定位的效果,还可以加些运动来避免难看的抖动。
4)、当浮动元素和定位元素同一层级的时候,IE6下定位元素消失
如下代码
<style> .box{width:300px;height:300px;margin:100px auto;position:relative;background:yellow;} .floatsL{width:100px;height:100px;float:left;background:green;} .pos{position:absolute;left:-20px;top:0;width:50px;height:50px;background:red;} .floatsR{width:200px;height:100px;float:left;background:green;} </style> </head> <body> <div class="box"> <div class="pos"></div> <div class="floatsL"></div> <div class="floatsR"></div> </div> </body>
问题产生条件:a、IE6 b、当所有浮动元素的宽度之和减去父级宽度大于-3px c、浮动元素和定位元素位于同一结构层级(这个问题的一般解决方案是 给定位元素加个父级,让他们处于不同层次的结构层级)
四、表单元素引发的兼容问题
表单元素包括:文本框、下拉框、单选框、复选框、文本域、隐藏域、上传控件
其中常用而且容易出现兼容问题的是输入型元素 比如 输入框和文本域
a、文本框在IE6、7下上下会有1px间隙问题
可以如下代码查看
<style> .box{width:200px;border:solid 1px #000;} .box input{height:28px;border:1px solid blue;} </style> </head> <div class="box"> <input type="text" /> </div>
这个问题解决方案 就是 加浮动
b、文本框设置 border
:
none
;在IE6下无效
这个问题的解决方案有两个
1)、将border
:
none
;更改为
border
:0
;
2)、重设文本框的背景 个人建议采用此种方案
c、输入型表单控件加入背景,当文字超出文本框本身宽度时,背景会随着移动
解决方案也有两个
1)、设置背景时,把 fixed 加上 即background
:
url(1.jpg) no-repeat fixed
; 这么处理虽然可以处理掉文字超出文本宽度背景移动的问题,但是,如此处理的话,背景的位置其实是稍微有点不符的,与正常浏览器下比较的话,会有所偏差,而这个是无法调整的
2)、最好呢,还是给input外加个父级,然后给父级设置背景,一般的处理,就是input 去边框,去背景,边框背景加给父级,只需让父级和input同高同宽即可。
d、下拉框IE6下不支持高度设置,而且即便有了高度设置,加上line-height
:
30px
;也无法控制文本的居中问题,并且在IE各版本下表现也不一致
其实可以看到各大网站在用到“下拉框”时,基本都是模拟出来的,因为本身带来的兼容性问题太大
e、文本域在浏览器下的兼容问题
其实这个也没什么大问题,只不过为了样式统一,一般会设置 resize:
none
;
overflow
:
hidden
;,注意
overflow
:
auto
; 在IE6即便区域够大,也可能出现滚动条
先整理这么多吧,以后发现的话再去扩展。