兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段

hack实现方式和原理

#hacker{

    color:red;

    *color:white; /*for ie6,ie7*/

    *+color:blue; /*for ie7*/

    _color:gray; /*for ie6*/

    color:balck !important; /*for firefox*/

    color:yellow \9; /*for ie9*/

}

透明 兼容所有浏览器

.transparent{

    filter:alpha(opacity=50);

   -moz-opacity:0.5;/**Firefox 3.5即将原生支持opacity

属性，所以本条属性只在Firefox3以下版本有效 ***/

   -khtml-opacity: 0.5; opacity: 0.5;

}

渐变兼容所有浏览器

.gradient{

    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#dedede);
    background: -moz-linear-gradient(top, #ffffff, #dedede);

}

高亮兼容所有浏览器

.highlighted {

    background: none repeat scroll 0 0 #00ADEE;

    color: #FFFFFF;

    padding: 0 5px;

}

阴影兼容firefox

.shadow{

    box-shadow: 0 5px 10px #cecece;;

}

圆角兼容firefox

.radius{

    -webkit-border-radius: 4px;   /*只支持webkit内核的浏览器*/

    border-radius: 4px;  /*只支持IE内核的浏览器（IE>=7)*/

    -moz-border-radius : 4px; /*只支持Mozilla内核的浏览器*/

    border:#ddd solid 1px;

    padding:4px;

}

超出省略号展示兼容firefox，ie所有浏览器

.ellipsis{

    white-space:nowrap;/*设置不折行*/

    text-overflow:ellipsis;/*这就是省略号喽*/

    -o-text-overflow:ellipsis;/*兼容opera*/

    width:80px;

    overflow:hidden;

}

旋转图片旋转效果，纯css实现，不兼容IE9以下浏览器

.rotate:hover{

     -o-transform: rotate(40deg); /* Opera浏览器 */

    -webkit-transform: rotate(40deg); /* Webkit内核浏览器 */

    -moz-transform: rotate(40deg); /* Firefox浏览器 */

    transform: rotate(360deg);

    transition: all 1s ease-out 0s;

}

首字母兼容所有浏览器

.firstletter:first-letter{

     font-size:120%;

}

去除链接虚线框兼容所有浏览器

<a href="link1.htm" onfocus="this.blur()">link</a>

纯css横向纵向居中兼容所有浏览器

<div style="width:960px; height:200px; background:red; position:absolute; left:50%;

margin-left:-480px; top:50%; margin-top:-100px;"></div>

保存到桌面快捷方式一段php代码

<?php

$Shortcut = "[InternetShortcut]

URL=http://kuai.qietu.com

IDList=[{000214A0-0000-0000-C000-000000000046}]Prop3=19,2";

Header("Content-type: application/octet-stream");

header("Content-Disposition: attachment; filename=shortcut.url;");

echo $Shortcut;

?>

图标黑白变彩色快速实现整站黑白只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。

html {     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

或者第二种方法在样式文件的最上端加上如下代码：以下是代码片段：

body{filter:Gray;}

img{filter:Gray;}

flash 调用js最简单的方法方便flash工程师与js工程师的协调工作。

flash 调用js 最简单的方法是 :

getURL("javascript:function()"); //function 为此FLASH所在页面的JS函数名.

js 传递变量给 flash 最简单的方法是:

flash.setVariable("变量名","变量值"); //flash为此FLASH的id

网页将不能被另存为 <noscirpt>的用法很广，其中一条就是可以使JS广告失效。

<noscript><iframe src=*.html></iframe></noscript>

防止被人frame

<SCRIPT LANGUAGE=javascript><!--

　if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

永远都会带着框架这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

<script language=javascript><!--

　if (window == top)top.location.href = frames.htm;// --></script>

关闭输入法

<input style="ime-mode:disabled"/>

防止复制

<body oncopy="return false"; oncut="return false";>

不准粘贴

<body onpaste="return false";>

取消选取、防止复制

<body onselectstart="return false";>

将彻底屏蔽鼠标右键,无右键菜单

<body oncontextmenu="return false";>

也可以用于网页中Table框架中

<table border oncontextmenu=return(false)><td>no</table>

弹出窗口

欢迎收藏哦。

普通的弹出窗口

window.open ('page.html') ;

经过设置后的弹出窗口

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');

弹启一个全屏窗口

window.open('http://kuai.qietu.com','example01','fullscreen');

window.open('index.asp','','fullscreen=1');

弹启一个被F11化后的窗口

window.open('http://kuai.qietu.com','example01','channelmode');

在弹出窗口中加上一个关闭按钮

onClick='window.close()';

弹启一个带有收藏链接工具栏的窗口

window.open('http://kuai.qietu.com','example03','width=400,height=300,directories');

ENTER键可以让光标移到下一个输入框

<input onKeyDown="if(event.keyCode==13)event.keyCode=9" >

IE地址栏前换成自己的图标

<link rel="ShortcutIcon" href="favicon.ico">

可以在收藏夹中显示出你的图标

<link rel="Bookmark" href="favicon.ico">

自动跳转 content=3 表示3秒刷新到URL

<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" charset="gb2312"/>

IE自带的网页过渡特效

<meta  http-equiv="Page-Enter"  content="blendTrans(Duration=1.0)">

混合

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=0)">

盒状收缩

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=1)">

盒状展开

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=2)">

圆形收缩

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=3)">

圆形放射

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=4)">

向上擦除

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=5)">

向下擦除

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=6)">

向右擦除

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=7)">

向左擦除

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=8)">

垂直遮蔽

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=9)">

水平遮蔽

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=10)">

横向棋盘式

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=11)">

纵向棋盘式

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=12)">

随机溶解

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=13)">

左右向中央缩进

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=14)">

中央向左右扩展

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=15)">

上下向中央缩进

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=16)">

中央向上下扩展

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=17)">

从左下抽出

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=18)">

从左上抽出

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=19)">

从右下抽出

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=20)">

从右上抽出

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=21)">

随机水平线条

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=22)">

随机垂直线条

<meta  http-equiv="Page-Enter"  content="revealTrans(Duration=1.0,Transition=23)">

随机

网页不会被缓存

<meta http-equiv = "pragma" content="no-cache">

<meta http-equiv = "Cache-Contro" content="no-cache, must-revalidate">

<meta http-equiv = "expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

<meta http-equiv="expires"  content="0">

满屏的遮罩纯css实现史上最简单代码，兼容所有浏览器

/*纯css全屏的遮罩层*/

#overlay{

    display: none;

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    background-color: black;

    z-index:;

    -moz-opacity: 0.8;

    opacity:.80;

    filter: alpha(opacity=80);

}

不错的JS模拟下拉菜单

来自日常工作中的整理，使用频率比较高的一个代码范例。 遇到的时候不太好找，所以要收藏哦。

演示

1987

请选择性别↓

初中

代码

var ____configArray;

function __initDropDownList(configArray){

    //获取Select菜单

    ____configArray=configArray;

    var existArray=configArray.split("|");

    for(var i=0;i<existArray.length;i++){

        if(existArray[i].length<1){return;}

        //根据参数分别获取div，并分别添加事件

        var parentContainer=document.getElementById(existArray[i]);

        if(!parentContainer){return;}

        //获取下面的select，且获取其中的option

        var selectObj=parentContainer.getElementsByTagName("select");

        if(selectObj.length<1){return;}

        var optionArray=selectObj[0].getElementsByTagName("option");

        //获取option，并分别添加到各个li

        var optionLength=optionArray.length;

        for(var j=0;j<optionLength;j++){

            //获取ul，以便能够添加项目

            var ulObj=parentContainer.getElementsByTagName("ul");

            if(ulObj.length<1){return;}

            //获取span，以便能显示当前选择的项目

            var spanObj=parentContainer.getElementsByTagName("span");

            if(spanObj.length<1){return;}

            var liObj=document.createElement("li");

            var textNode=document.createTextNode(optionArray[j].firstChild.nodeValue)

            liObj.appendChild(textNode);

            liObj.setAttribute("currentIndex",j);

            //给每个liObj添加事件

            liObj.onclick=function(){

                selectCurrentItem(this.parentNode,this);

            }

            liObj.onmouseover=function(){this.className="over";}

            liObj.onmouseout=function(){this.className="";}

            ulObj[0].appendChild(liObj);

            spanObj[0].onclick=function(event){

                //如果当前是显示的，就隐藏，反之亦然

                showHiddenUl(this);

            }

            spanObj[0].onmouseover=function(){this.className='over';}

            spanObj[0].onmouseout=function(){this.className="";};

            ulObj[0].onclick=function(){this.className="";}

        }

        parentContainer.onclick=function(event){

            if(!event){event=window.event;}

                //阻止事件冒泡

                event.cancelBubble=true;

                var eventUlObj=this.getElementsByTagName("ul")[0];

                bodyClickHiddenUl(eventUlObj);

        }

    }

}

function selectCurrentItem(ulObj,currentObj){

    var parentObj=ulObj.parentNode;

    var spanObj=parentObj.getElementsByTagName("span")[0];

    spanObj.firstChild.nodeValue=currentObj.firstChild.nodeValue;

    var selectObj=parentObj.getElementsByTagName("select")[0];

    selectObj.selectedIndex=parseInt(currentObj.getAttribute("currentIndex"));

}

function showHiddenUl(currentObj){

    var parentNode=currentObj.parentNode;

    var ulObj=parentNode.getElementsByTagName("ul")[0];

    if(ulObj.className==""){

        ulObj.className="show";

    }else{

        ulObj.className="";

    }

}

//点击body区域（非“下拉菜单”）隐藏菜单

function addBodyClick(func) {

    var bodyObj=document.getElementsByTagName("body")[0];

    var oldBodyClick = bodyObj.onclick;

        if (typeof bodyObj.onclick != 'function') {

            bodyObj.onclick = func;

        } else {

            bodyObj.onclick = function() {

            oldBodyClick();

            func();

        }

    }

}

//隐藏所有的UL

function bodyClickHiddenUl(eventUlObj){

    var existArray=____configArray.split("|");

    for(var i=0;i<existArray.length;i++){

        if(existArray[i].length<1){return;}

        //寻找所有UL并且隐藏

        var parentContainer=document.getElementById(existArray[i]);

        if(!parentContainer){return;}

        var ulObj=parentContainer.getElementsByTagName("ul");

        if(eventUlObj!=ulObj[0]){

            ulObj[0].className="";

        }

    }

}

var __dropDownList="dropDownList1|dropDownList2|dropDownList3";

__initDropDownList(__dropDownList);

//添加这个可以确保点击body区域的时候也可以隐藏菜单

addBodyClick(bodyClickHiddenUl);

JS拖动层特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

var posX;

var posY;

fdiv = document.getElementById("元素ID");

document.getElementById("元素ID").onmousedown=function(e)

{

    if(!e) e = window.event;  //IE

    posX = e.clientX - parseInt(fdiv.style.left);

    posY = e.clientY - parseInt(fdiv.style.top);

    document.onmousemove = mousemove;

}

document.onmouseup = function()

{

    document.onmousemove = null;

}

function mousemove(ev)

{

    if(ev==null) ev = window.event;//IE

    fdiv.style.left = (ev.clientX - posX) + "px";

    fdiv.style.top = (ev.clientY - posY) + "px";

}

客服漂浮效果特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

var _customer = document.getElementById('customer');

_customer.style.display = 'block';

function position(){

    _customer.style.top = '250px';

}

lastScrollY=0;

function heartBeat(){

var diffY;

if (document.documentElement && document.documentElement.scrollTop)

 diffY = document.documentElement.scrollTop;

else if (document.body)

 diffY = document.body.scrollTop

else

 {/*Netscape stuff*/}

//alert(diffY);

percent=.1*(diffY-lastScrollY);

if(percent>0)percent=Math.ceil(percent);

else percent=Math.floor(percent);

_customer.style.top=parseInt(_customer.style.top)+percent+"px";

lastScrollY=lastScrollY+percent;

//alert(lastScrollY);

}

window.setInterval("heartBeat()",50);

缩放图片等比例缩放特效基于javascript，务必将代码放到html后面，适合二次开发

方法一

//e = document.getElementById("tester");

var images = document.images;

for(i=0; i<images.length; i++){

    var img = images[i];

    if (images[i].width > 50){

       images[i].width = 50;

    }

}

方法二

//缩放图片到合适大小

function ResizeImages()

{

   var myimg,oldwidth,oldheight;

   var maxwidth=100;

   var maxheight=100

   var imgs = document.getElementById('zoomer').getElementsByTagName('img');   //如果你定义的id不是zoomer，请修改此处  。先获取到所有图片

   for(i=0;i<imgs.length;i++){

     myimg = imgs[i];

     if(myimg.width > myimg.height)

     {

         if(myimg.width > maxwidth)

         {

            oldwidth = myimg.width;

            myimg.height = myimg.height * (maxwidth/oldwidth);

            myimg.width = maxwidth;

         }

     }else{

         if(myimg.height > maxheight)

         {

            oldheight = myimg.height;

            myimg.width = myimg.width * (maxheight/oldheight);

            myimg.height = maxheight;

         }

     }

   }

}

//缩放图片到合适大小

ResizeImages();

tooltip 纯css制作三角兼容所有浏览器

.arrow{ width:; height:;

        border-top:0px;

        border-bottom:9px solid #1c7ecf;

        border-right:9px solid #fff;

        border-left:9px solid #fff;

}

对联广告演示了一个两侧漂浮广告的效果，简洁的代码。兼容所有浏览器。

//用JS写入图片

    var delta=0.08

    var collection;

    function floaters() {

        this.items    = [];

        this.addItem    = function(id,x,y,content)

                  {

                    document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');

                    var newItem                = {};

                    newItem.object            = document.getElementById(id);

                    newItem.x                = x;

                    newItem.y                = y;

                    this.items[this.items.length]        = newItem;

                  }

        this.play    = function()

                  {

                    collection                = this.items

                    setInterval('play()',10);

                  }

        }

        function play()

        {

            for(var i=0;i<collection.length;i++)

            {

                var followObj        = collection[i].object;

                var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);

                var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);

                if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {

                    var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;

                    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));

                    followObj.style.left=followObj.offsetLeft+dx;

                    }

                if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {

                    var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;

                    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));

                    followObj.style.top=followObj.offsetTop+dy;

                    }

                followObj.style.display    = '';

            }

        }    

    var theFloaters        = new floaters();

    //右面

    theFloaters.addItem('coupleter1','document.body.clientWidth-106',80,'<a href="###" target=_blank><img src="#"  width="100" height="300" border=0></a>');

    //左面

    theFloaters.addItem('coupleter2',6,80,'<a href=http://www.lanrentuku.com/ target=_blank><img src="#" width="100" height="300" border=0></a>');

    theFloaters.play();

//图片格式调用方法

//<EMBED src=images/duilian.swf quality=high  WIDTH=100 HEIGHT=300 TYPE=application/x-shockwave-flash id=ad wmode=opaque></EMBED>

复选框全选/取消全选后单元格变色

<form name="form1" method="post">

    <input name="id[]" type="checkbox">AAA<br/>

    <input name="id[]" type="checkbox">BBB<br/>

    <input name="id[]" type="checkbox">CCC<br/>

    <input name="id[]" type="checkbox">DDD<br/>

    <input type="checkbox" name="chkAll" title="" onclick="selectAll();">全选/取消

</form>

    <script type="text/javascript">

            //复选

            function selectAll(){

                var chk = document.form1.chkAll.checked;

                for (i=0;i<document.all.length;i++){

                    if (document.all[i].name=="id[]"){

                        document.all[i].checked=chk;

                        chkRow(document.all[i]);

                    }

                }

            }

            //复选后单元格变色

            function chkRow(obj){

                var r = obj.parentElement.parentElement;

                //alert(r.nodeName);  //body

                if(obj.checked){

                    r.style.backgroundColor="#E6E9F2";

                }

                else{

                    if(r.rowIndex%2==1)r.style.backgroundColor="";

                    else r.style.backgroundColor="#F5F5F5";

                }

            }

    </script>

jquery图片滚动左右可控制图片滚动,图片自动滚动

   <!--滚动代码区域-->

<div class="roll">

    <div class="left">&lt;</div>

    <div class="inner">

          <ul style="margin-left: 0px;">

             <li>

                 <font class="danley">Quickcss</font>

             </li>

             <li>

                 <font class="danley">Quickcss</font>

             </li>

             <li>

                 <font class="danley">Quickcss</font>

             </li>

         </ul>

    </div>

    <div class="right">&gt;</div>

    <div class="status">

        <a href="#" class="">a</a>

        <a href="#" class="selected">a</a>

        <a href="#" class="">a</a>

    </div>

</div>

<!--滚动代码区域-->

<script type="text/javascript">

     /** 版权所有: 快切

     * 网站地址: http://code.google.com/p/quickcss/*/

    $(function(){

        // 添加Jquery扩展的写法

        $.extend({

            autoChange:function(){

                $('.roll ul').animate({'marginLeft':-100},function(){

                    $(this).css('marginLeft',0).find('li:first').appendTo($(this));

                    // 状态按钮的切换

                    if($('.roll .status a.selected').next().size()==0){

                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');

                    }

                    else{

                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');

                    }

                });

            }

        })

        // 函数重复调用，基于jQuery的方法一定要以上面的写法定义，否则这里不会生效

        _interval = setInterval("$.autoChange()",3000);

        /*鼠标移上去滚动停止,鼠标拿开继续滚动*/

        $('.roll').mouseover(function(){

            clearInterval(_interval);

        })

        $('.roll').mouseout(function(){

            _interval = setInterval("$.autoChange()",3000);

        })

        $('.roll .left').click(function(){

            // 将整个ul设置动画方式负移位，制造图片左移的效果，然后设置移位为0，将第一张图片获取补到最后，到这里整个图片左移效果完成

            $('.roll ul').animate({'marginLeft':-100},function(){

                $(this).css('marginLeft',0).find('li:first').appendTo($(this));

                // 状态按钮的切换

                    if($('.roll .status a.selected').next().size()==0){

                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');

                    }

                    else{

                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');

                    }

            });

        },

        function(){});

        $('.roll .right').click(function(){

            // 同上

            $('.roll ul').css('marginLeft',-100).find('li:last').prependTo($('.roll ul'));

            $('.roll ul').animate({'marginLeft':0});

            // 状态按钮的切换

                    if($('.roll .status a.selected').next().size()==0){

                        $('.roll .status a.selected').removeClass('selected').parent().find('a:first').addClass('selected');

                    }

                    else{

                        $('.roll .status a.selected').removeClass('selected').next().addClass('selected');

                    }

        },

        function(){})

    })

    </script>

兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段的更多相关文章

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...
兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...
给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9
<select class="b-select" id="location-province" name="Province" def ...
兼容IE6,IE7和firefox可以使用的一些css hack:
.一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...
最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
自从安装了IE8.0正式版本!木头就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...
区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法
HACK原理:不同浏览器对各中字符的识别不同在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

随机推荐

【Java】事件驱动模型和观察者模式
你有一件事情,做这件事情的过程包含了许多职责单一的子过程.这样的情况及其常见.当这些子过程有如下特点时,我们应该考虑设计一种合适的框架,让框架来完成一些业务无关的事情,从而使得各个子过程的开发可以专注 ...
python学习（七）字典学习
#!/usr/bin/python # 字典 # 当时学java的时候, 语言基础就学了好久, 然后是各种API, 最后才是集合 # 键值对, 可变 # 1. 映射操作 D = {'food' : ' ...
php html_entity_decode使用总结
在处理网页字符串的时候,尤其是做爬虫类的应用时,经常会涉及到要处理的字符串中包含html标签,现在对这类字符串的处理做一个小的总结: 有时候获取到的字符串中有html标签,在入库的时候出于安全的考虑通 ...
window 安装 skywalking
1.下载安装包官网下载需要的安装包: https://github.com/OpenSkywalking/skywalking/releases 分别下载skywalking-collector.z ...
iOS视频直播用到的协议
一 .流媒体 1 - 伪流媒体 1.1 扫盲:边下载边播放1.2 伪流媒体:视频不是实时播放的,先把视频放在数据库,再供客户端访问,比如:优酷,爱奇艺等 1.3 特点: 边下边存,文件会保存.遵守了 ...
该 Bucket 已存在，或被其他用户占用
redis自启动
$ vi /etc/init.d/redis # chkconfig: 2345 90 10 # description: Redis is a persistent key-value databa ...
【题解】P3162CQOI2012组装
[题解][CQOI2012]组装考虑化为代数的形式,序列$\left[a_i \right]$表示选取的$i$种类仓库的坐标. $ans=\Sigma(a_i-x)^2,(*)$,展开: ...
python数据分析之：数据清理，转换，合并，重塑(二)
一:移除重复数据 DataFrame经常出现重复行,就像下面的这样 In [7]: data=DataFrame({'k1':['one']*3+['two']*4,'k2':[1,1,2,3,3,4 ...
SPDIF接口细则详解
链接:https://max.book118.com/html/2017/0422/101658483.shtm

兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段

hack实现方式和原理

渐变 兼容所有浏览器

高亮 兼容所有浏览器

阴影 兼容firefox

圆角 兼容firefox

超出省略号展示 兼容firefox，ie所有浏览器

旋转 图片旋转效果，纯css实现，不兼容IE9以下浏览器

首字母 兼容所有浏览器

去除链接虚线框 兼容所有浏览器

纯css横向纵向居中 兼容所有浏览器

保存到桌面快捷方式 一段php代码

图标黑白变彩色 快速实现整站黑白 只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。

flash 调用js最简单的方法 方便flash工程师与js工程师的协调工作。

网页将不能被另存为 <noscirpt>的用法很广，其中一条就是可以使JS广告失效。

防止被人frame

永远都会带着框架 这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

关闭输入法

防止复制

不准粘贴

取消选取、防止复制

将彻底屏蔽鼠标右键,无右键菜单

弹出窗口

ENTER键可以让光标移到下一个输入框

IE地址栏前换成自己的图标

可以在收藏夹中显示出你的图标

自动跳转 content=3 表示3秒刷新到URL

IE自带的网页过渡特效

网页不会被缓存

满屏的遮罩纯css实现 史上最简单代码，兼容所有浏览器

不错的JS模拟下拉菜单

JS拖动层 特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

客服漂浮效果 特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

缩放图片 等比例缩放 特效基于javascript，务必将代码放到html后面，适合二次开发

tooltip 纯css制作三角兼容所有浏览器

对联广告 演示了一个两侧漂浮广告的效果，简洁的代码。兼容所有浏览器。

复选框 全选/取消 全选后单元格变色

jquery图片滚动 左右可控制图片滚动,图片自动滚动

兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段的更多相关文章

随机推荐

热门专题

渐变兼容所有浏览器

高亮兼容所有浏览器

阴影兼容firefox

圆角兼容firefox

超出省略号展示兼容firefox，ie所有浏览器

旋转图片旋转效果，纯css实现，不兼容IE9以下浏览器

首字母兼容所有浏览器

去除链接虚线框兼容所有浏览器

纯css横向纵向居中兼容所有浏览器

保存到桌面快捷方式一段php代码

图标黑白变彩色快速实现整站黑白只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。

flash 调用js最简单的方法方便flash工程师与js工程师的协调工作。

永远都会带着框架这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

满屏的遮罩纯css实现史上最简单代码，兼容所有浏览器

JS拖动层特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

客服漂浮效果特效基于javascript，务必将代码放到html后面，适合二次开发，拖动层必须在标签内写上style样式，并且有top和left属性、绝对定位

缩放图片等比例缩放特效基于javascript，务必将代码放到html后面，适合二次开发

对联广告演示了一个两侧漂浮广告的效果，简洁的代码。兼容所有浏览器。

复选框全选/取消全选后单元格变色

jquery图片滚动左右可控制图片滚动,图片自动滚动