day06 CSS兼容性问题
第一部分:
1,浏览器默认样式
问题:
有些浏览器默认会给一些标签添加一些样式,并且不同浏览器添加的样式不相同,这样会导致我们布局的页面在不同浏览器发生错乱
解决:
清除默认样式,保证在每个浏览器样式统一
body,p,ul,h1,h2,h3,h4,h5,h6,ol,dl,dd,form,input,ul,ol{
marigin:0;
padding:0;
list-style:none;
font-weight:normal;
}
img{border:none;}
2,img标签底部间隙问题
问题:
div中包含一张图片,底部可能有2px,4px或更多的间隙,不同的font-size会影响这个间隙的大小。
解决:
1.将图片的垂直对其方式vertical-align,值为top或者bottom
2.将图片转换为块元素display:block
3.将包含图片的父容器的字体大小设置为0,font-size:0
3,img标签IE下图片有边框
问题:
html图片img加了超链接之后产生蓝色边框(IE6~10)
解决:
img{border:none;}
4,margin上下边框合并问题
问题:
两个div容器,如果同时给上下两个div都加外边框的话,会发生边框合并
div{
border: 1px solid gray;
width: 100px;
height: 100px;
}
div.one{
margin-bottom: 30px;
}
div.two{
margin-top: 50px;
}
one和two相距50px
解决:
只给一个容器调整外边框即可,不要同时给两个
5,IE6双倍边距bug [出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现]
问题:
当我们给元素添加浮动的并指定左外边距的时候,IE5,6会出现双倍边距
div.outer{
width: 100px;
height: 100px;
margin-left: 10px;
float:left;
display: inline;
}
解决:
给浮动的元素指定display:inline;
6,父容器(子元素浮动)高度为0
问题:
父元素的高度不确定,且子元素个数不确定,而且还是float会引发父元素高度为0问题,浮动的子元素层级高于父元素导致撑不开父元素的高度
解决:
在使用float元素的父元素结束前加一个高度为0宽为0且有clear:both样式的空DIV
<div style="clear:both;"></div>
在父元素上添加overflow:hidden
8,IE6不支持固定定位 fixed
解决:
div{
width:100px;
height:100px;
border:1px solid gray;
position:fixed;
bottom:20px;
right:30px;
/*---ie6---*/
position:absolute;
top:expression(eval(document.documentElement.scrollTop+200));
}
*html{
background-image:url(blank:about);
background-attachment:absolute;
}
9,CSS hack
.bb{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6,7,8识别*/
+background-color:#f1ee18;/*IE6,7识别*/
_background-color:#f1ee18;/*IE6识别*/
}
(注意) 不同浏览器解析盒子模型的差异:
IE5、IE6盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3) 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候,后者覆盖前者,当加上之后说明第一个,样式优先级更高,采用前者,但是Ie6不支持!important;
***********************************************
1.常见兼容性问题有哪些?
1) img有间隙(与盒子)
2) img有边框(与超链接)
3) 双倍边距(float:left;margin-left:10)
2.解决兼容性问题的方法
1) !important
ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别
2) CSS hack
1. 注释法
通常用于head标签内部,通过link引用不同的css
<!--[if IE]>
<link href="ie.css" />
<![endif]-->
<!--[if ! IE]>
<link href="fie.css" />
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" />
<![endif]-->
2. 属性前缀法
1. _和- :仅IE6支持
2. * :IE6、E7支持
用于css属性前
#tip{
background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
}
1. \9 :所有IE浏览器都支持
2. \0 :IE8、IE9支持,opera部分支持
3. \9\0 :IE8部分支持、IE9支持
4. \0\9 :IE8、IE9支持
用于属性值后
#tip{
background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
}
3) meta方法
使用X-UA-Compatible来设置IE浏览器兼容模式
<head>
<meta http-equiv="X-UA-Compatible" content=""></meta>
</head>
常见布局
1.行级布局
2.列级布局
3.定位布局
----------
4.复杂布局
一行中多个子级元素有边框,并且宽度是经过严格计算,这时候不能全部浮动,否则会全部错位
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
前提:有边框;宽度严格计算
inner1 左浮动
inner2 左浮动
inner3 不浮动,margin-left
inner1 左浮动
inner2 左浮动
inner3 右浮动
不需要指定inner2的右外边距以及inner3左外边距
相对定位
IE兼容性
自适应布局(计算屏幕分辨率,浏览器视口大小 JS)
1.自己高度决定父级高度
<div class="outer">
<div class="inner"></div>
</div>
outer不指定高度
inner指定高度,内边距,边框 外边距
outer的高度=
inner高度+inner内边距+边框
---如果outer{overflow:hidden} 让父级的边界与子级的边界重合---
outer的高度=
第一部分:
1,浏览器默认样式
问题:
有些浏览器默认会给一些标签添加一些样式,并且不同浏览器添加的样式不相同,这样会导致我们布局的页面在不同浏览器发生错乱
解决:
清除默认样式,保证在每个浏览器样式统一
body,p,ul,h1,h2,h3,h4,h5,h6,ol,dl,dd,form,input,ul,ol{
marigin:0;
padding:0;
list-style:none;
font-weight:normal;
}
img{border:none;}
2,img标签底部间隙问题
问题:
div中包含一张图片,底部可能有2px,4px或更多的间隙,不同的font-size会影响这个间隙的大小。
解决:
1.将图片的垂直对其方式vertical-align,值为top或者bottom
2.将图片转换为块元素display:block
3.将包含图片的父容器的字体大小设置为0,font-size:0
3,img标签IE下图片有边框
问题:
html图片img加了超链接之后产生蓝色边框(IE6~10)
解决:
img{border:none;}
4,margin上下边框合并问题
问题:
两个div容器,如果同时给上下两个div都加外边框的话,会发生边框合并
div{
border: 1px solid gray;
width: 100px;
height: 100px;
}
div.one{
margin-bottom: 30px;
}
div.two{
margin-top: 50px;
}
one和two相距50px
解决:
只给一个容器调整外边框即可,不要同时给两个
5,IE6双倍边距bug [出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现]
问题:
当我们给元素添加浮动的并指定左外边距的时候,IE5,6会出现双倍边距
div.outer{
width: 100px;
height: 100px;
margin-left: 10px;
float:left;
display: inline;
}
解决:
给浮动的元素指定display:inline;
6,父容器(子元素浮动)高度为0
问题:
父元素的高度不确定,且子元素个数不确定,而且还是float会引发父元素高度为0问题,浮动的子元素层级高于父元素导致撑不开父元素的高度
解决:
在使用float元素的父元素结束前加一个高度为0宽为0且有clear:both样式的空DIV
<div style="clear:both;"></div>
在父元素上添加overflow:hidden
8,IE6不支持固定定位 fixed
解决:
div{
width:100px;
height:100px;
border:1px solid gray;
position:fixed;
bottom:20px;
right:30px;
/*---ie6---*/
position:absolute;
top:expression(eval(document.documentElement.scrollTop+200));
}
*html{
background-image:url(blank:about);
background-attachment:absolute;
}
9,CSS hack
.bb{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6,7,8识别*/
+background-color:#f1ee18;/*IE6,7识别*/
_background-color:#f1ee18;/*IE6识别*/
}
(注意) 不同浏览器解析盒子模型的差异:
IE5、IE6盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3) 设置浏览器去遵循w3c标准
只需要在网页的顶部加上DOCTYPE声明即可
!important的使用
p{
color:red !important;
color:blue;
}
当不加!important;的时候,后者覆盖前者,当加上之后说明第一个,样式优先级更高,采用前者,但是Ie6不支持!important;
***********************************************
1.常见兼容性问题有哪些?
1) img有间隙(与盒子)
2) img有边框(与超链接)
3) 双倍边距(float:left;margin-left:10)
2.解决兼容性问题的方法
1) !important
ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别
2) CSS hack
1. 注释法
通常用于head标签内部,通过link引用不同的css
<!--[if IE]>
<link href="ie.css" />
<![endif]-->
<!--[if ! IE]>
<link href="fie.css" />
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" />
<![endif]-->
2. 属性前缀法
1. _和- :仅IE6支持
2. * :IE6、E7支持
用于css属性前
#tip{
background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
}
1. \9 :所有IE浏览器都支持
2. \0 :IE8、IE9支持,opera部分支持
3. \9\0 :IE8部分支持、IE9支持
4. \0\9 :IE8、IE9支持
用于属性值后
#tip{
background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
}
3) meta方法
使用X-UA-Compatible来设置IE浏览器兼容模式
<head>
<meta http-equiv="X-UA-Compatible" content=""></meta>
</head>
常见布局
1.行级布局
2.列级布局
3.定位布局
----------
4.复杂布局
一行中多个子级元素有边框,并且宽度是经过严格计算,这时候不能全部浮动,否则会全部错位
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
前提:有边框;宽度严格计算
inner1 左浮动
inner2 左浮动
inner3 不浮动,margin-left
inner1 左浮动
inner2 左浮动
inner3 右浮动
不需要指定inner2的右外边距以及inner3左外边距
相对定位
IE兼容性
自适应布局(计算屏幕分辨率,浏览器视口大小 JS)
1.自己高度决定父级高度
<div class="outer">
<div class="inner"></div>
</div>
outer不指定高度
inner指定高度,内边距,边框 外边距
outer的高度=
inner高度+inner内边距+边框
---如果outer{overflow:hidden} 让父级的边界与子级的边界重合---
outer的高度=
inner高度+inner内边距+边框+外边距
父级{overflow:hidden}
1)父级宽高指定: 超过部分隐藏
2)父级宽高没有指定,子级浮动,清除子级浮动
3)父级宽高没有指定,子级不浮动,父级的内边紧贴子级外边
兄弟{overflow:hidden}
one浮动,two不浮动
two如果{overflow:hidden}
two位于一列