Web标准中兼容问题的解决学习笔记

最新推荐文章于 2024-07-27 23:17:04 发布

weixin_34245082

最新推荐文章于 2024-07-27 23:17:04 发布

阅读量217

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/syc2013/blog/109367

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、兼容问题产生的原因

1.  各种浏览器是由不同的公司开发的

2. 浏览器不断的更新换代

二、兼容问题的解决

(一)、从兼容问题产生的原因看可以使用两种方法解决兼容问题
    1. 使用不会出现兼容问题的属性
    2. 使用CSS hack
    3. 条件注释

(二)、解决方案的详细说明

    1. 使用不会出现兼容问题的属性

        在IE浏览器中如果浮动元素后面紧跟一个普通元素（未定义定位等显示属性），则普通元素会显示在浮动元素的后面，而在Firefox浏览器中浮动元素会遮盖普通元素。如果定义第二个元素也为浮动元素，则在两个浏览器中会显示相同的效果。

   2. 使用CSS hack

        hack一般是指对程序或系统进行非官方的修改。CSS hack是一种改善CSS在不同浏览器下的表现形式的技巧方法。

        ！important就是CSS1定义的语法，作用是提高指定样式规则的应用优先权。语法格式：{属性:属性值 !important }; 

        在IE6.0之前的版本一直都不支持这个语法，而到了IE7.0以后开始支持，可以利用这一定啊来分别给IE6.0和IE7.0进行不同的样式定义

        示例：
            .hack{
            border:10px solid #aaa !important;
            border:20px solid #222;
            width:250px;
            height:100px;
            font-size:36px;}

    3. 条件注释

        条件注释是IE特有的一种功能，能处理IE不同版本问题。但是注释主要是针对XHTML的，而非CSS，所以只能写在XHTML代码中进行版本判断

        示例：
            <!--[if IE]>此内容只有IE可见<![endif]-->
            <!--[if IE 6.0]>此内容只有IE 6.0可见<![endif]-->
            <!--[if !IE 5.0]>此内容除了IE5.0都可见<![endif]-->
            <!--[if gt IE 5.0]>此内容IE 5.0 以上版本都可见<![endif]-->

        说明：
            *  gt 表示 greater than,当前版本以上版本，不包含当前版本
            *  lt 表示 less than，当前版本以下版本，不包含当前版本
            *  gte 表示 greater than or equal，当前版本以上版本，并且包含当前版本
            *  lte 表示less than or equal，当前版本以下版本，并且包含当前版本

三、CSS hack的使用

1.  新的浏览器不支持旧的hack，在实际工作中要尽量避免使用hack。

2. 仅IE 7.0 识别的hack

    *+html就是针对IE 7.0 浏览器的hack，这个选择符写在相应的选择符的前面，并且空一格

    示例：
        *+html 选择符{属性：值;}

3. 仅IE 6.0 识别的hack

    语法：
            选择符{_属性:值;}

    说明：
            下划线(_)只有在IE 6.0浏览器中是识别的，在IE 7.0、Mozilla/Firefox浏览器中不能够被识别

4. 仅IE识别的hack

    *在IE浏览器中是识别的，在Mozilla/Firefox浏览器中不能够被识别

    语法：*选择符{属性:属性值;}

5. 针对Firefox的CSS hack

    针对Firefox浏览器的hack一般使用！important方法

四、综合应用简单示例

    <style>
       .main{
        width:250px;
        height:100px;
        border：#000 10px solid;
        *border:#999 10px solid!important;
        *border:#333 10px solid;}
    </style>

分析：IE 6.0 可以识别单不能识别!important，所以最终会使用颜色#333， IE 7.0 可以同时识别和!important所以显示颜色为#999 Firefox会忽略*语句，显示的颜色为#000

转载于:https://my.oschina.net/syc2013/blog/109367