• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!
首页 > IT技术 > DIV+CSS > 内容

DIV+CSS之IE Bug总结

2015-06-11 21:12:00   来源:叶景网络
        叶景网络(www.cngxit.com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设等。叶景网络为您分享:DIV+CSS之IE Bug总结
   1.最小高度问题
    height:auto !important;height:100px;min-height:100px;
    同理宽度也一样
    2.双空白边浮动,layout
    //---------------------------------------------------
    可触发layout的属性:
    position:absolute;
    float:left & right;
    display:inline-block;
    width:除auto以外
    height:除auto以外
    zoom   IE专用属性,除normal以外,无法通过校验
    writing-mode:tb-rl  E专用属性,无法通过校验
    //---------------------------------------------------
    IE7触发layout
    overflow:hidden | scroll | auto ;height:1%;
    overflow-x|-y:hidden | scroll | auto ;
    position:fixed;
    min-width:任意值
    max-width:除none之外的任意值
    min-height:任意值
    max-height:除none之外的任意值
    //---------------------------------------------------
    IE6下空白双边(加倍),浮动加margin,解决办法:
    display:inline;内联触发layout
    //---------------------------------------------------
    IE6下相对容器中的绝对定位:
    描述:position :relative;没有给高度后position:absolute;
    解决办法(触发layout):*html .box{height:1%;}
    //---------------------------------------------------
    IE6下重复字符:
    描述:当多个元素浮动内部加起来刚好等于外部的宽度,且中间有注释时,出现最后一个字符重复
    解决办法:调整宽度内部宽度之和小于外部的宽度
    //---------------------------------------------------
    3像素的文本偏移:
    描述:当前一个div中采用了浮动,后面的<p>或者文本会出现3像素的偏移
    解决办法(用选择器):*html .box{margin-right:-3px;}.box-1{height:1%;}
    注意:*{margin:0;padding:0;}的使用,解决不同浏览器的问题
    //---------------------------------------------------
    断头台触发:
    a{text-decoration:none;display:block;}
    a:hover{background:#fff;或者padding:1px;}
    //---------------------------------------------------
    清除浮动元素:
    .clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
    .clearfix{display:inline-block;}或者.clearboth{clear:both;}
    //---------------------------------------------------
    躲躲猫:
    描述:在 <a></a>文本后加一个div前加上了clear:both;,ie6下会隐藏,鼠标放上去回出现。
    解决办法:避免这种不规范、不正常的布局方法。
    //---------------------------------------------------
    消失的margin-bottom
    描述:在内部使用margin:30px;在ie6,ie7下底部边距没有效果,且会产生双边距问题及3像素的文本偏移
    解决办法:*html .box-float{display:inline;margin-right:27px;}
    //---------------------------------------------------
    过滤器(filters)的使用:
    http://centericle.com/ref/css/filters/
    css招数:css hack
    //---------------------------------------------------
    IE的有条件注释(IE5 以上的版本可以识别):
    <!--[if IE]>
    <style type="text/css">
    div .content{color:red;}
    </style>
    <![endif]-->
    //---------------------------------------------------
    IE的只有特定的版本能识别
    <!--[if IE 7]>
    <style type="text/css">
    div .content{color:red;}
    </style>
    <![endif]-->
    //---------------------------------------------------
    IE的不是特定的版本能识别
    <!--[if !IE 7]>
    <style type="text/css">
    div .content{color:red;}
    </style>
    <![endif]-->
    //---------------------------------------------------
    IE的高于特定的版本能识别
    <!--[if gt IE 7]>
    <style type="text/css">
    div .content{color:red;}
    </style>
    <![endif]-->
上一篇:HTML页面CSS书写规范
下一篇:最后一页
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
table+div+iframe打造高度自适应的后台框架 table+div+iframe打
HTML页面CSS书写规范 HTML页面CSS书写规范
CSS中一种简单的方法让文字与图片平行 CSS中一种简单的方
CSS兼容IE6问题汇总 CSS兼容IE6问题汇总
关注排行RANKING
1

table+div+iframe打造高度自适应的后台框架

table+div+iframe打造高度自适应的后台框架 第一个tr是固定高度,用于顶部的导航菜单,所以无论是td还是里面的div header,其高度...

2

HTML页面CSS书写规范

HTML页面CSS书写规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、...

3

CSS中一种简单的方法让文字与图片平行

CSS中一种简单的方法让文字与图片平行 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

4

CSS兼容IE6问题汇总

CSS兼容IE6问题汇总 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

5

DIV+CSS图片和文字如何显示同一行

DIV+CSS图片和文字如何显示同一行 需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical-align: midd...

6

关于IE中18px的默认行高

关于IE中18px的默认行高 在IE中定义height时,如果值小于18px的默认行高时,得到的结果总是18px的高,这...

7

DIV CSS 网页兼容全搞定 (IE6 ...

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌) 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。

8

常用的CSS命名规范

常用的CSS命名规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

9

DIV+CSS浏览器兼容模式

DIV+CSS浏览器兼容模式 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行...