浏览器兼容性iframe框架还有边距塌陷问题
浏览器兼容性
1.页⾯会默认给所有标签保存空隙，解决⽅法
*{margin:0px;padding:0px}
2.块级元素⽔平居中
div{width:1000px;margin:0px auto}
3.给⽂字和图⽚设置⽔平居中
div{text-align:center}
4.块级元素⽔平垂直居中
.box{width:200px;height:200px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-100px;}
5.清除浮动的⽅法：
1.div{overflow:hidden}
2.div:after{content:"";display:block;clear:both}
6.定位保证不串⾏
相对定位，嵌套绝对定位，除⾮此元素要参照浏览器
7.伪类事件的写作顺序
hover必须在link之后，active必须在hover之后
8.不要删除，否则会变成IE低版本模式
9.如果要兼容IE8以下浏览器，不要写html5和css3
10.如果⾼版本浏览器要设置css3属性兼容，要加浏览器前缀
列如：-webkit-flex：1；
11.div嵌套img，会在底部有空隙，解决⽅法
img{vertical-align:top;}
12.去掉多张图⽚同⾏的空隙
img{float:left}
13.谍影重重：当浮动元素中间出现空⽂本，空标签或者注释，会占空格⾯积，造成元素串⾏，
解决⽅法：
1.注释不添加到标签中间
2.把宽度值相应变⼩
3.不设置浮动，列如：定位，流动布局，转化表格法
14.边距塌陷：产⽣在嵌套元素中，垂直⽅向上边距会出现合并现象，解决：
1.给⽗类标签添加内边距
2.给⽗类添加border
3.给⽗类添加overflow：hideen
IE低版本浏览器兼容性
兼容性选择符
添加在属性上的
_width 让属性兼容IE6以下
*width让属性兼容IE7以下
>width让属性兼容IE7以下
添加在属性值上的
width：400px/0；让属性兼容IE8以上
width：400px/9；让属性兼容IE5以上
添加在选择器上的
*body .box{}兼容IE7以下
*+body .box{}兼容IE7以上
语法与规则
提⾼属性优先级
background-color：silver！important；兼容IE7以上
borderbox注意：必须写在重复属性之前
标签的选择条件
< !–[if IE 7]>
< h1>看看⽂字什么时候显⽰< /h1>
< h1>看看⽂字什么时候显⽰< /h1>
< ![endif]–>
⽐较运算符
lt⼩于 lte⼩于等于 gt⼤于 gte⼤于等于 ！不等于
< !–[if gte IE 8]>
< h1>看看⽂字什么时候显⽰< /h1>
< ![ endif]–>
多条件判断
&并且 |或者
< !–[if （gte IE 7）&（lte IE 8）]>
< h1>看看⽂字什么时候显⽰< /h1>
< ![endif]–>
iframe框架
< iframe src=""width=“100%” height=“400px”
frameborder=“0” scrolling=“no” marginwidth=“300px” marginheight=“300px”>< /iframe> width宽度 height ⾼度 src路径 frameborder 边框 scrolling是否显⽰滚动条
marginwidth 框架⾥⾯页⾯的左边距 marginheight框架⾥⾯页⾯的上边距
box-sizing设置或检索对象的盒模型组成模式
content-box显⽰成填充+边框+边距 border-box显⽰成填充+边框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。