zoukankan      html  css  js  c++  java
  • 工作中遇到的浏览器差别(就不叫IE6bug了)

    1、根据ie版本写css

     <!--[if lt IE 8]>
     <style> 
    .cntContainer{margin-top: -1px;} 
     </style>
    <![endif]-->

     非ie:if !IE;          仅IE:if IE;                     等于:if IE 6;    

     大于:if gt IE 8;    大于或等于:if gte IE 8;    小于或等于:   if lte IE 8;      

    2、关于display:table-row;

    比如table中的tr,在js里控制它显示和不显示:document.getElementById('theBlueRow').style.display='table-row'和display:none。IE6不支持table-row,改用display=''。就可以了。

    3、获取设置节点的自定义属性:

    对于<div id="newTest" myAttr="old"></div>。

    获取自定义属性myAttr:

    若是document.getElementById("newTest").myAttr,则只对IE6、IE8有效,IE9、IE10、chrome、firefox、safari对无效;

    若是document.getElementById("newTest").getAttribute('myAttr')则都有效。

    设置自定义属性:

    若是document.getElementById("newTest").myAttr = "new";

    alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

    输出结果:IE9、IE10、firefox、chrome、safari均为:new,old。IE6、IE8则为:new,new。

    若是document.getElementById("newTest").setAttribute("myAttr","new"); 

    alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest').getAttribute('myAttr'));

    输出结果:IE9、IE10、firefox、chrome、safari均为:undefined,new。IE6、IE8则为:new,new。

    所以为了兼容性,获取和设置自定义属性时统一使用:.getAttribute('myAttr')和.setAttribute("myAttr","new"); 获取jquery的方法.attr();

    4、ie6、7里,如果<td></td>则设置td的border无效;
         如果是<td>&nbsp;</td>则设置td的border有效.

    (在tr上设置border在ie6、7中总是无效的。)

    5、IE6里弹出层或是说设置了position:absolute/fixed;的div遮不住select。

    解决办法:通过一个与绝对定位的div同样大小的iframe来遮住select。

    <div id='fixedDiv>
        <div id='fixedDivContent'>div content</div>
        <iframe scrolling='no' iframeborder='0' style='position:absolute;left:0;top:0;height:??px;100%;z-index:-1'>
        </iframe>
    </div>    

    其中的iframe的高度和宽度不能同时是100%。

    6、ie6不支持position:fixed;的解决方法:

    纯参考完美解决IE6不支持position:fixed的bug

    #fixedDiv{    position: fixed;top:0;left:0;}     
    /*for ie6*/
    *html #fixedDiv{ position:absolute;
    left:expression(eval(document.documentElement.scrollLeft+20));
    top:expression(eval(document.documentElement.scrollTop+20))} 

    但是这样在滑动的时候,这个fixeDiv在它该待的地方有很明显的振动,原因是‘

    IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
    解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!

    ’,添加下列代码后就完全看不出振动了:

    * html,* html body{
    background-image:url(about:blank);
    background-attachment:fixed;//不可少,防止画面闪烁
    }

     不要直接用<html>做测试,记得写<!DOCTYPE......

  • 相关阅读:
    04: vue生命周期和实例属性和方法
    03: vuejs 事件、模板、过滤器
    (打补丁 )patch
    zabbix安装
    zabbix简介
    linux 虚拟网络模型介绍
    虚拟化
    虚拟化分类(半虚拟化和全虚拟化)
    playbook详解—YAML格式的文本
    ansible的介绍和一些基本模块介绍
  • 原文地址:https://www.cnblogs.com/yigeqi/p/3549380.html
Copyright © 2011-2022 走看看