Heim >Web-Frontend >HTML-Tutorial >常见的IE6兼容以及css兼容_html/css_WEB-ITnose

常见的IE6兼容以及css兼容_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:30978Durchsuche

IE6虽然随着XP系统退出市场在国外基本基本消失,但是在国内依然占据很大的市场份额。政务网站、页游官网等依然要考虑到IE6用户的体验。如果你的网站使用CSS3等“新技术”时,就必须果断放弃IE6的兼容。

  • 浏览器添加默认样式

  • 问题:

    有些浏览器会给浏览器添加默认样式,而且不同浏览器添加的样式不同,导致布局在不同浏览器发生不同的错乱。

    解决:

    清楚默认样式,保证不同浏览器样式统一。(百度中有很多不错的清除样式模板)以下是我自己常用的清除样式文件:

     1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, button, input, textarea,th, td { margin: 0;padding: 0;}/* 设置默认字体 */ 2 body,button, input, select, textarea { /* for ie */ font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ } 3 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } 4 h2 { font-size: 16px; } 5 h3 { font-size: 14px; } 6 h4, h5, h6 { font-size: 100% } 7 img { height: auto;vertical-align: middle;border: 0 none;} 8 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 9 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */10 small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */11 ul, ol { list-style: none; }12 /* 重置文本格式元素 */13 a { text-decoration: none; }14 abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted;cursor: help;}15 q:before, q:after { content: ''; }16 /* 重置表单元素 */17 legend { color: #000; } /* for ie6 */18 fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */19 /* 注:optgroup 无法扶正 */20 button, input, select, textarea { font-size: 100%; margin: 0;vertical-align: baseline; /* 使得表单元素在 ie 下能继承字体大小 */ }21 table {border-collapse: collapse;border-spacing: 0;}22 hr {border: none;height: 1px;}23 /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */24 html { overflow-y: scroll;}25 body{font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color: #8C8C8C;}

  • img标签底部间隙

  • 问题:

    div中包含一张图片,底部可能有2px、4px或更多的间隙,不同的font-size会影响间隙的大小。

    解决:

    1. 将图片的垂直对齐方式vertical-align值设为top或bootm
    2. 将图片转化为块元素,display:block;
    3. 将包含图片的父容器字体大小设为0,font-size:0;
  • img在IE有蓝色边框

  • 问题:

    img标签在IE6-IE10加了超链接(a标签)后蓝色边框

    解决:

    img{border:0;}

  • margin上下边距合并

  • 问题:

    同时给上下容器添加上下边距会出现边距合并问题(合并最大的值)

    解决:

    不要同时给两个上下边距,只给一个就好。

  • margin-top没有加到指定元素上

  • 问题:

    在容器中给子元素一个margin-top没有想要的效果。

    解决:

    1. 给父元素一个透明的像素边框 border:1px solid rgba(0,0,0,0);
    2. 通过给父元素一个padding-top来模拟margin-top。
  • IE6双倍边距

  • 问题:

    给浮动元素加margin-left时IE6会出现双倍边距。

    解决:

    给浮动元素display:inline;

  • 子元素浮动时父元素高度为0

  • 问题:

    父元素高度不确定,子元素浮动时,父元素高度变为0。浮动子元素层级高于父元素导致撑不开父元素。

    解决:

    1. 父容器添加overflow:hidden;
    2. 在子元素后添加一个空div清除浮动
  • IE6不支持固定定位

  • 问题:

    IE6不支持position:fixed;

    解决:

    1 选择器{width: 200px;height: 200px;background: red;position: fixed;bottom: 50px;right: 50px;*position: absolute;*top: expression(eval(document.documentElement.scrollTop+200));}2 *html{background-image: url("blank:about");background-attachment: absolute;}

  • IE6不支持png透明

  • 问题:

    IE6下png透明度不支持

    解决:

    background-image:url(123.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='123.png');

    滤镜中的图片路径应该是绝对路径。

  • 文档类型的声明

  • 问题:

    IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象。

    解决:

    书写文档声明。

  • IE6默认行高

  • 问题:

    IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度时会影响布局。

    解决:

    给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。

  • IE6 3px的bug

  • 问题:

    IE6浮动元素与非浮动元素处于一行有默认的3px间距。

    解决:

    设置所有元素浮动。

  • IE6只支持a链接的hover

  • 问题:

    IE6只支持a的hover不支持其他元素的hover。

    解决:

    使用JS模拟a:hover或者合理嵌套a链接。

  • IE6透明rgba与opacity

  • 问题:

    IE6不支持此两种透明的设置方法。

    解决:

    使用IE6当中的滤镜filter替代掉,如:opacity:0.6;_filter:alpha(opacity=60)。

  • IE6不支持min/max-height

  • 问题:

    IE6不支持min/max-height。

    解决:

    为IE6单独设置hack,即_height:最小高度值;_width:最小宽度值;

  • IE6li的间距问题

  • 问题:

    IIE6浏览器 li标签设置宽高,且li里面的元素发生了浮动。

    解决:

    1. li不设置宽高。
    2. li内部元素不浮动。
  • a链接点击时有蓝色边框

  • 问题:

    a链接点击时有蓝色边框。

    解决:

    a:focus { outline: none 0; }

  • li在IE6自适应消失

  • 问题:

    如果li中有块元素在IE6下虽然浮动,默认宽度是100%而不是自适应。

    解决:

    1. li设置固定宽度
    2. display:inline_block;

     

     

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn