新手学习网站建设,wordpress jiathis,做网站的模仿还要去量宽高吗,网站建设自学多长时间文章目录 一、兼容性二、兼容问题1. 在IE6下#xff0c;子级的宽度会撑开父级设置好的宽度2. IE6中#xff0c;元素浮动#xff0c;如果宽度需要内容撑开#xff0c;需要给里面的块元素都添加浮动才可以3. 在IE6、7下#xff0c;元素要通过浮动排在同一排#xff0c;就需… 文章目录 一、兼容性二、兼容问题1. 在IE6下子级的宽度会撑开父级设置好的宽度2. IE6中元素浮动如果宽度需要内容撑开需要给里面的块元素都添加浮动才可以3. 在IE6、7下元素要通过浮动排在同一排就需要给这行元素都加浮动4. 注意标签的嵌套规则5. 在IE6下元素的高度如果小于19px的时候会被当成19px来处理6. 在IE6下不支持1px的 dotted 边框样式7. hasLayout在IE下大部分兼容性都是因为hasLayout属性的触发问题尽量出发hasLayout属性可以减少很多IE下的兼容性的问题。8. IE6下双边距的bug9. 在IE6、7下li 本身没有浮动 li 里面的内容有浮动li 下会产生一个间隙10. 在IE6当一行子级元素宽度之和和父级的宽度相差超过3px或者子级元素不满行的情况的时候最后一行的子级元素的margin-bottom会失效11. 在IE6下的文字溢出bug12. 在IE6下当浮动元素和绝对定位元素是兄弟关系的时候绝对定位会失效13. 在IE6、7下子级元素有相对定位父级overflow包不住子级元素14. 在IE6下如果绝对定位的父级的宽高是奇数的时候子级元素的right 和 bottom 值会有1px的偏差15. IE6透明度使用filter 兼容透明度16. 在IE6、7下输入型的表单标签控件 上下会有1px的间隙17. 条件注释语句适配低版本IE时常使用 一、兼容性
兼容性页面在不同的浏览器中可能会显示不同。开发人员适配不同浏览器的过程就叫兼容性。
二、兼容问题
1. 在IE6下子级的宽度会撑开父级设置好的宽度
提示盒模型的计算一定要精确否则IE浏览器可能会显示不同
style#box {width: 300px;}.left {width: 200px;background-color: red;height: 300px;float: left;}.right {width: 200px;float: right;}.div {width: 170px;height: 170px;padding: 15px;background: blue;}/stylediv id boxdiv classleft/divdiv classrightdiv classdiv/div/div/div2. IE6中元素浮动如果宽度需要内容撑开需要给里面的块元素都添加浮动才可以
style#box {width: 400px;}.left {background: red;float: left;}.right {background: yellow;float: right;}h3{margin: 0;height: 40px;float: left;}/stylediv id boxdiv classlefth3左侧/h3/divdiv classrighth3右侧/h3/div/div3. 在IE6、7下元素要通过浮动排在同一排就需要给这行元素都加浮动
style#box {width: 400px;}.left {width: 100px;height: 100px;background: red;float: left;}.right {width: 200px;height: 100px;background: blue;/* margin-left: 100px; */float: left;}/stylediv id boxdiv classlefth3左侧/h3/divdiv classrighth3右侧/h3/div/div4. 注意标签的嵌套规则
5. 在IE6下元素的高度如果小于19px的时候会被当成19px来处理
解决方法overflowhidden
6. 在IE6下不支持1px的 dotted 边框样式
解决方法切背景平铺
7. hasLayout在IE下大部分兼容性都是因为hasLayout属性的触发问题尽量出发hasLayout属性可以减少很多IE下的兼容性的问题。
在IE下父级有边框的时候子元素的margin回失效 解决方法触发父级的 hasLayout 属性
8. IE6下双边距的bug
在IE6下块元素有浮动有横向的margin 的值的时候横向的 margin 的值会扩大两倍
.box {width: 200px;height: 200px;background: red;float: left;margin: 100px;display: inline;}
div classbox/divmargin-Left 一行中左侧的第一个元素有双边距 margin-right 一行中右侧的第一个元素有双边距
解决方法displayinline
9. 在IE6、7下li 本身没有浮动 li 里面的内容有浮动li 下会产生一个间隙
解决方法
给li 加浮动给li 加 vertical-aligntop在IE6下最小高度的bug 和 li 的间隙问题共存的时候给li 加浮动 vertical-align 不好使
ul {margin: 0;padding: 0;list-style: none;width: 300px;}li {list-style: none;height: 30px;border: 1px solid #000;float: left;/* vertical-align: top;*/}a {width: 100px;height: 30px;float: left;background: red;}span {width: 100px;height: 30px;float: right;background: blue;}
ullia href#/aspan/span/lilia href#/aspan/span/lilia href#/aspan/span/li/ul10. 在IE6当一行子级元素宽度之和和父级的宽度相差超过3px或者子级元素不满行的情况的时候最后一行的子级元素的margin-bottom会失效
还没有解决方法避免出现超过3px和出现不满行的情况
.box {border: 10px solid red;width: 600px;overflow: hidden;}.box div {width: 100px;height: 100px;background: blue;border: 5px solid #000;margin: 20px;float: left;display: inline;}
div classboxdiv1/divdiv2/divdiv3/divdiv4/divdiv1/divdiv2/divdiv3/div!-- div4/div --/div11. 在IE6下的文字溢出bug
子元素的宽度和父级的宽度如果相差小于3px的时候 两个浮动元素中间的注释或者内联元素就会出现文字溢出内联元素越多溢出越多 解决办法用div 把注释或者内联元素包起来
.box1 {width: 400px;}.left1 {float: left;}.right1 {float: right;width: 400px;}
div classbox1div classleft1/div!-- 上面是left部分--divspan/spanspan/spanspan/span/divdiv classright1右边的部分/div/div12. 在IE6下当浮动元素和绝对定位元素是兄弟关系的时候绝对定位会失效
解决方法 不让浮动元素和绝对定位元素是兄弟关系用div 或者其它标签 把a标签包起来
.box2 {width: 200px;height: 200px;border: 1pc solid #000;position: relative;}.box2 a {position: absolute;width: 40px;height: 40px;background: red;right: 20px;top: 0px;}.box2 ul {width: 150px;height: 150px;background: yellow;margin: 0 0 0 50px;padding: 0;float: left;display: inline;}div classbox2ul/uldiva href#/a/div/div13. 在IE6、7下子级元素有相对定位父级overflow包不住子级元素
解决方法给父级也加相对定位
.box3 {width: 200px;height: 200px;border: 1px solid #000;overflow: auto;position: relative;}.div3 {width: 150px;height: 300px;background: red;position: relative;}div classbox3div classdiv3/div/div14. 在IE6下如果绝对定位的父级的宽高是奇数的时候子级元素的right 和 bottom 值会有1px的偏差
15. IE6透明度使用filter 兼容透明度
opacity:0.5;
filter: alpha(opacity50)16. 在IE6、7下输入型的表单标签控件 上下会有1px的间隙
解决方法给input加浮动
17. 条件注释语句适配低版本IE时常使用
!--[if ie]我是IE![endif]--!--[if ie 6]我是IE 6![endif]--!--[if ie 7]我是I7![endif]--!--[if ie 8]我是IE8![endif]--
