【吉光片羽】ie6兼容性的几个点

1.浮动换行。自己写个导航,li向左浮动,到ie6下全部错开了。

--》 还是在现有bootstrap框架的基础上修改样式保险一些。

 <div id="mymenu" class="navbar span12">
  <!-- START MAIN NAVIGATION -->
  <ul class="nav navbar-nav">
//....
</ul>
</div>

错开的主要原因还是在于ie6对inline-block的支持不完全,li,a的宽高也不一致,hover变换背景的时候,a标签不能铺满,需要增加专门的css来调整

    <!--[if lte IE 6]>
       <link href="~/Content/css/iesisi.css" rel="stylesheet" />

  <!-- bsie css 补丁文件 -->
    <link href="~/Content/css/bootstrap-ie6.min.css" rel="stylesheet" />
    <!-- bsie 额外的 css 补丁文件 -->
    <link href="~/Content/css/ie.css" rel="stylesheet" />
    <![endif]-->

详情:http://www.cnblogs.com/hejia/archive/2013/01/11/2856420.html

2.png图片变成灰白的。

这是ie对色彩的支持不全引起的。

这使用了js的方法修正

   <!--[if lte IE 6]>
  <!-- bsie js 补丁只在IE6中才执行 -->
    <script src="~/Content/js/ie6/DD_belatedPNG_0.0.8a.js"></script>
    <script type="text/javascript">
       try {
           DD_belatedPNG.fix(‘.topa img,#mymenu img,.speaknav img,#slid img,#footer img,.emanhold img,#eman_sm‘);
       } catch (exception) {

       }
    </script>
    <![endif]-->

3.z-index问题。

ie6的z-index和父级元素关系密切,而且需要相对位置。

   .usernav,.learnav{z-index: 1000;position: relative}

4.插件不兼容,全部js都失效。

如果一个插件不支持,会导致这个<script></script>块中的脚本都失效,如果要不考虑该插件对ie6的支持而保全其他脚本,就将脚本分开。

时间: 2024-10-28 19:53:38

【吉光片羽】ie6兼容性的几个点的相关文章

【吉光片羽】之 Web API

1.在asp项目中直接添加apiController,需要新增Global.asax文件.再增加一个webapiConfig,如果需要访问方式为"api/{controller}/{action}/{id}“ 修改路由: using System; using System.Collections.Generic; using System.Linq; using System.Net.Http.Formatting; using System.Web; using System.Web.Htt

【吉光片羽】短信验证

早就听说过阿里大于,短信验证绑定手机的过程我们也经历了很多次.下面简单记录下过程. 1.注册一个应用 得到AppKey 和 App Secret     应用管理-->应用列表 2.设置签名 配置管理-->验证码 签名是出现短信内容最前面的字段,比如[xx科技]xxxx, 这个需要审核.显示是2小时内. 3.设置模板 模板就是用来组织短信内容的部分 4. 应用测试 完成上面3步之后,我们就可以测试下,在应用管理--应用测试 https://www.alidayu.com/center/appl

【JavaScript吉光片羽】--- 滑动条

灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条dom节点id min: 1, // 刻度最小值 stepCount: 5, // 刻度步数 step: 1, // 刻度步长 $alpha: "",//显示亮度的id touchEnd: function () { } // 拖动完成回调 }; this.option = $.extend

【吉光片羽】MVC 导出Word的两种方式

1.直接将Html转成Word.MVC自带FileResult很好用.Html中我们也可以嵌入自己的样式. html: <div id="target"> <style> table{border-collapse: collapse;border: 1px solid black;} td{border: 1px royalblue solid} </style> <img src="../../Content/eman_sm.pn

【吉光片羽】vertical-align 笔记

一直对这个属性模拟两可,每次要试好几个值还得不到想要的效果.今天好好试验一下.vertical-align  常用有6个值.baseline,top,middle,bottom,text-top,text-bottom. 如果设置高度.第一行是span,第二行是图片,第三行是a,后面三者是文字. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

10要点解决IE6兼容性问题

吼吼,最近在学兼容问题,觉得学得不好,就百度了一些资料. 1.使用声明 你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” "http://www.w3.org/TR/html4/strict.dtd”> or,forXHTML: <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN” "http://www.w3.o

IE6兼容性问题IE6常见bug

IE6兼容性问题及IE6常见bug详细汇总 来源:互联网 作者:佚名 时间:03-31 16:03:45 [大 中 小] IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin时造成margin双倍(双边距) 解决方法

解决IE6兼容性问题的十一大技巧

10要点解决IE6兼容性问题 1.使用声明 你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN” "http://www.w3.org/TR/html4/strict.dtd”>or,forXHTML: <!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN” "http://www.w3.org/TR/xhtml1/DT

前端工程师IE6兼容性问题随笔(未完待续)

1 height.在IE6下元素高度小于19px的时候,会被当做19px来处理.解决办法:用overflow:hidden;来处理.box{height:2px;background:red;overflow:hidden;} 2 1px dotted(1px的点线)在IE6下不支持解决办法:且背景图片平铺 3 margin.兼容性问题的爆发点.无法触发haslayout,无法解决margin的传递,在IE6下父级有边框的时候(也 就是设置了border的三元素的时候),子元素的margin值会