代码改变世界

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

  stoneniqiu  阅读(321)  评论(0编辑  收藏  举报

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的支持而保全其他脚本,就将脚本分开。

 

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示