zoukankan      html  css  js  c++  java
  • 关于IE的一些hack

    TIPS:对于完全放弃IE的幸福开发者,以下内容全是废话,建议跳转到 博客园 着页,寻找更优质的文章。

    对于前端开发来说IE一直是心里的痛,不管你觉得做的多好的网页,放到它上面总会有一些意想不到的问题发生,所以你不得不针对IE单独做些手脚,你就有必要知道一些IE浏览器下的hack写法。

    比较常用的几个hack(目前大多公司都只要求兼容到IE8,稍微变态点的也就是IE7下没大的错位就行了,下面hack足以):

    9 像如:6.5em;8em9;在ie7-ie10宽度是8em;

     像如:6.5em;8em;在ie8-ie11宽度是8em;

    * 像如:6.5em;*8em ie7以下会宽度是8em

    针对IE11还可以通过以下媒体查询的方式来解决IE11下的问题:

    @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {

        div{8em;}

    }

    加上以上代码可以让IE11下div的宽度为8em,为了避免IE低版本下也会认识这一媒体查询,最好在screen前加上only。

    在IE浏览器下,特别是IE8以下个人感觉真真没必要去太折腾(win7的最低配置都是ie8了),但是为了更好的体验,可以针对IE8以下浏览器给出一个友善的升级提示也是很不错的,IE下的条件注释语句值得拥有:

    //ie7及以下会提示用户去升级浏览器
    <!--[if lte IE 7]>
     <div class="browser-upgrade">你的浏览器版本过低,请到<a href="http://browsehappy.com" class="browser-upgrade__link">这里</a>更新,以获取最佳体验!</div>
    <![endif]-->

    条件语句还有更多用途,在使用html5新增标签页面可以针对IE低版本引入htmlshiv让低版本浏览器也能识别html新增标签:

    <!--[if lt IE 9]>
    <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->

    ie的条件语句常用的有几下几种(所有条件注释语句在非IE浏览器下都是普通的注释,不要用非ie去给非IE的浏览执行操作):

    lt :就是Less than的简写,也就是小于的意思。

    lte :就是Less than or equal to的简写,也就是小于或等于的意思。

    gt :就是Greater than的简写,也就是大于的意思。

    gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

    !:就是不等于的意思,跟javascript里的不等于判断符相同。

    <!--[if IE]>
        只有IE才支持
    <![endif]-->
    <!--[if !IE 7]>
        IE7不支持
    <![endif]-->
    <!--[if lt IE 8]>
        IE8以下浏览器才支持
    <![endif]-->
    <!--[if lte IE 8]>
        IE8及以下浏览器才支持
    <![endif]-->
    <!--[if gt IE 8]>
        IE8以上浏览器才支持
    <![endif]-->
    <!--[if gte IE 8]>
        IE8及以上浏览器才支持
    <![endif]-->

    好好运用上面的方法解决你项目中的IE别样BUG吧。

  • 相关阅读:
    搭建armlinuxgcc交叉编译工具链环境(Android原生(JNI)开发环境搭建)
    linux vi命令详解
    Android手机在开发调试时logcat不显示输出信息的解决办法
    2012的总结和13的展望
    Gvim编码学习笔记
    vue自定义过滤器格式化时间为年、月、日、小时、分钟、刚刚 J
    学校网站群建设理念
    何为真正网站群?
    手机网站——移动互联网新趋势
    建站是浮云,We7很给力
  • 原文地址:https://www.cnblogs.com/xwwin/p/6962263.html
Copyright © 2011-2022 走看看