一个控制背景的显示公共方法 包括对ie的兼容性

var ww;
var wh;
var ieVer=IEVersion();
var chVer=ChromeVersion();
var browserType=browser();
var expandNav=false;

//让IE8支持forEach
if ( !Array.prototype.forEach ) {
    Array.prototype.forEach = function forEach( callback, thisArg ) {
        var T, k;
        if ( this == null ) {
            throw new TypeError( "this is null or not defined" );
        }
        var O = Object(this);
        var len = O.length >>> 0;
        if ( typeof callback !== "function" ) {
            throw new TypeError( callback + " is not a function" );
        }
        if ( arguments.length > 1 ) {
            T = thisArg;
        }
        k = 0;
        while( k < len ) {
            var kValue;
            if ( k in O ) {
                kValue = O[ k ];
                callback.call( T, kValue, k, O );
            }
            k++;
        }
    };
}

function resize(first){
    ww=$(window).width();
    wh=$(window).height();
    var $body=$(‘body‘);

    $body.css({
        ‘height‘:wh+‘px‘
    });
    var headerHeight=(ww>720)?60:46;
    $(‘#container‘).css(‘height‘,(($body.height()-headerHeight)+‘px‘));
    $(‘#bg‘).css(‘height‘,(($body.height()-headerHeight)+‘px‘));

    var $nav=$(‘nav‘);
    var $sm=$(‘.sub-menu-div‘);
    if(ww<=720){
        $nav.css(‘height‘,Math.max(($body.height()-headerHeight),355)+‘px‘);

        $sm.stop().show();
        $nav.stop().hide();
    }else{
        $sm.stop().hide();
        $nav.stop().show();
    }

    resizeHook(first);
}

$(function(){
    resize(true);
    $(window).resize(function() {
        resize();
        setTimeout(resize,500);
    }).load(function(){
        resize();
        setTimeout(resize,500);
    });

    $(‘.has-sub-menu‘).mouseover(function () {
        if(ww>720) {
            var $sm = $(this).children(‘.sub-menu-div‘);
            $sm.stop().fadeIn();
        }
    }).mouseleave(function () {
        if(ww>720) {
            var $sm = $(this).children(‘.sub-menu-div‘);
            $sm.stop().fadeOut();
        }
    });

    $(‘.nav-button‘).click(function(){
        if(!expandNav){
            $(‘nav‘).stop().slideDown();
            if(ltIE9()){
                var $img=$(‘#right_button>img‘);
                $img.fadeOut(300,null,function(){
                    $img.attr(‘src‘,getImgUrl(‘hanburger-button-close‘)).fadeIn(300);
                });
            }else{
                $(‘.menu-button‘).addClass(‘menuhover‘);
            }
        }else{
            $(‘nav‘).stop().slideUp();
            if(ltIE9()){
                var $img=$(‘#right_button>img‘);
                $img.fadeOut(300,null,function(){
                    $img.attr(‘src‘,getImgUrl(‘hanburger-button‘)).fadeIn(300);
                });
            }else {
                $(‘.menu-button‘).removeClass(‘menuhover‘);
            }
        }
        expandNav=!expandNav;
    });

    if(noSVG()){
        $(‘#logo‘).attr(‘src‘,getImgUrl(‘header_logo‘));
        $(‘#logo_description‘).attr(‘src‘,getImgUrl(‘header_description‘));
    }

    if(ltIE9()){
        $(‘#right_button‘).html(‘<img style="display: block" src="‘+getImgUrl(‘hanburger-button‘)+‘" border=0 ondragstart="return false;"/>‘);
    }

    if(ltIE9() || browserType==‘Safari‘){
        var fontArr=[‘xi‘,‘zhengcu‘,‘putong‘];
        fontArr.forEach(function(e){
            $(‘.font-‘+e).removeClass(‘font-‘+e).addClass(‘font-native-‘+e);
        });
    }
});

function resizeHook(first){}

//判断浏览器版本是否低于IE9
function ltIE9(){
    return ieVer && ieVer<9;
}

//查询IE浏览器版本
function IEVersion(userAgent){
    var UA =  userAgent || navigator.userAgent;
    if(/msie/i.test(UA)){
        return UA.match(/msie (\d+\.\d+)/i)[1]*1;
    }else if(~UA.toLowerCase().indexOf(‘trident‘) && ~UA.indexOf(‘rv‘)){
        return UA.match(/rv:(\d+\.\d+)/)[1]*1;
    }
    return false;
}

//查询Chrome浏览器大版本
function ChromeVersion(){
    if(browser()!=‘Chrome‘){
        return false;
    }

    var agent = navigator.userAgent.toLowerCase() ;
    var regStr_chrome = /chrome\/[\d.]+/gi ;
    var info=(agent.match(regStr_chrome)+"").replace(/[^0-9.]/ig,"");
    return /^([0-9]+)\./.exec(info)[1]*1;
}

//判断浏览器种类
function browser(){
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return "IE";//判断是否IE浏览器
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    } //判断是否Opera浏览器
    if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
    } //判断是否Edge浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
        return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) {
        if(userAgent.indexOf("Windows") > -1){
            return "Safari for Win";
        }
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    } //判断是否IE浏览器
}

//判断是否不支持SVG
function noSVG(){
    return ltIE9() || browserType==‘Safari for Win‘ || (chVer && chVer<31);
}

function getImgUrl(token) {
    var urls = {
        "hanburger-button-close": "img/hanburger-button-close.png",
        "hanburger-button": "img/hanburger-button.png",
        "header_logo": "img/header_logo.png",
        "header_description": "img/header_description.png",
    };
    return $(‘.at-level-1‘).length>0 ? urls[token] : ‘../‘ + urls[token];
}

  

function resizeHook(){
    if(ww<=720){
        var $bf=$(‘#bg-float‘);
        $bf.css(‘width‘,ww+‘px‘);
        var bf_height=ww/720*534;
        if(wh>$bf.offset().top+bf_height){
            $bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘);
        }
    }
}

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="always" name="referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>关于凯京 - 凯京集团</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/hamburger.css">
    <link rel="stylesheet" href="../css/about-yudian.css">
    <!--[if lt IE 9]>
    <script src="../js/respond.min.js"></script>
    <script src="../js/html5shiv.min.js"></script>
    <![endif]-->
    <script src="../js/prefixfree.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
<header class="limit-parent-header at-level-2">
    <div class="limit-header">
        <a href="../index.html"><img id="logo" src="../img/header_logo.svg" border=0 ondragstart="return false;"></a>
        <img id="logo_description" src="../img/header_description.svg" ondragstart="return false;">
        <div id="right_button" class="nav-button">
            <section class="mod model-1">
                <div class="menu-button">
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
            </section>
        </div>
        <nav class="font-xi">
            <ul class="menu">
                <li class="menu-item"><a href="../index.html">首页</a></li>
                <li class="menu-item active-li"><a class="active-a" href="about-yudian.html">关于凯京</a></li>
                <li class="menu-item has-sub-menu"><a href="group-business.html">集团板块</a>
                    <div class="sub-menu-div">
                        <div class="sub-menu-arrow"></div>
                        <ul class="sub-menu">
                            <li class="sub-menu-item"><a href="chuangpu.html">商业保理</a></li>
                            <li class="sub-menu-item has-top-line"><a href="kaijing.html">融资租赁</a></li>
                            <li class="sub-menu-item has-top-line"><a href="luchang.html">信息科技</a></li>
                        </ul>
                    </div>
                </li>
                <li class="menu-item last-menu-item"><a href="contact.html">联系我们</a></li>
                <li class="menu-item new-menu-item"><a href="http://cloud.keking.cn" target="_blank">商户登录</a></li>
            </ul>
        </nav>
        <div class="clearer"></div>
    </div>
</header>
<div id="bg"></div>
<div id="container" class="limit-parent-article">
    <article class="limit-article">
        <p class="title font-zhengcu">凯京集团是什么?</p>
        <div class="content font-putong">
            <p>上海凯京信达科技集团有限公司(“凯京集团”),2015年成立于上海陆家嘴,专注为中小微企业和个人提供各类场景下的信贷服务,产品包括商业保理业务、融资租赁业务、供应链金融、大数据征信等。</p>
            <p>公司2015年获得知名投资机构数千万元人民币天使轮投资,2016年2月获得<b class="font-zhengcu">红杉资本</b>领投的1亿元人民币A轮投资,2016年12月获得由<b class="font-zhengcu">中航信托</b>领投、<b class="font-zhengcu">红杉资本</b>、<b class="font-zhengcu">复朴资本</b>跟投的2亿人民币B轮融资。</p>
            <p>我们的使命:数据重构物流</p>
            <p>我们的愿景:最具价值的数据科技企业</p>
        </div>
    </article>
    <img id="bg-float" src="../img/about_yudian_bg_float_mobile.png" ondragstart="return false;">
</div>
<script src="../js/public.js"></script>
<script src="../js/about-yudian.js"></script>
<!--[if lt IE 9]>
<script src="../js/rem.min.js"></script>
<![endif]-->
</body>
</html>

  

about-yudian.css

        /*# sourceURL=../css/about-yudian.css */
/*@ sourceURL=../css/about-yudian.css */
#bg{
    background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg");
    background-position: 50% 100%;
    background-size: cover;
    -ms-behavior: url("../js/backgroundsize.min.htc");
}

#bg-float{
    display: none;
}

.content{
    font-size: 1rem;
    color: #444444;
    margin-top: 60px;
    line-height: 2.0rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-align: justify;
}

.content>p{
    margin: 0.5rem 0;
}

b{
    font-size: 1.2rem;
}

@media (max-height: 750px) and (min-width: 721px) {
    #bg {
        background-position: 50% 70%;
    }
}

@media (max-width: 720px) {
    #bg {
        background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg");
        background-position: 50% 100%;
        background-size: cover;
        -ms-behavior: url("../js/backgroundsize.min.htc");
    }

    #bg-float{
        display: block;
        margin-left: -40px;
    }

    .content{
        font-size: 1rem;
        color: #444444;
        margin-top: 36px;
        line-height: 1.8rem;
    }
}

  

hamburgur.css

            /*# sourceURL=../css/about-yudian.css */
/*@ sourceURL=../css/about-yudian.css */
#bg{
    background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg");
    background-position: 50% 100%;
    background-size: cover;
    -ms-behavior: url("../js/backgroundsize.min.htc");
}

#bg-float{
    display: none;
}

.content{
    font-size: 1rem;
    color: #444444;
    margin-top: 60px;
    line-height: 2.0rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-align: justify;
}

.content>p{
    margin: 0.5rem 0;
}

b{
    font-size: 1.2rem;
}

@media (max-height: 750px) and (min-width: 721px) {
    #bg {
        background-position: 50% 70%;
    }
}

@media (max-width: 720px) {
    #bg {
        background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg");
        background-position: 50% 100%;
        background-size: cover;
        -ms-behavior: url("../js/backgroundsize.min.htc");
    }

    #bg-float{
        display: block;
        margin-left: -40px;
    }

    .content{
        font-size: 1rem;
        color: #444444;
        margin-top: 36px;
        line-height: 1.8rem;
    }
}

  

public.css

        /*# sourceURL=../css/public.css */
/*@ sourceURL=../css/public.css */
*{
    transition: 0.3s;
}

html{
    font-family: ‘PingFang SC‘,‘Helvetica Neue‘,Helvetica,‘Hiragino Sans GB‘,STHeitiSC-Light,‘Microsoft YaHei‘,Arial,sans-serif;
    font-size: 16px;
}

body {
    margin: 0;
    overflow: hidden;
}

a{
    text-decoration: none;
}

header {
    height: 60px;
    background-color: #283e56;
    user-select: none;
    z-index: 100;
}

.font-xi, .font-native-xi{
    font-weight: 300;
}

.font-zhengcu, .font-native-zhengcu{
    font-weight: 900;
}

.limit-header{
    display: inline-block;
    position: relative;
    text-align: left;
    transition: none;
    width: 1000px;
}

.limit-article{
    display: inline-block;
    position: relative;
    text-align: left;
    width: 900px;
    transition: none;
}

.limit-parent-header{
    text-align: center;
    transition: none;
}

.limit-parent-article{
    text-align: center;
    transition: none;
}

#logo{
    margin-top: 18px;
    height: 24px;
    transition: none;
}

#logo_description{
    position: relative;
    top: -4px;
    margin-left: 10px;
    height: 12px;
    transition: none;
}

.clearer{
    clear: both;
}

#right_button {
    display: none;
}

header nav{
    position: absolute;
    top: 0;
    right: 0;
}

.menu,.sub-menu{
    padding: 0;
    margin: 0;
}

.menu-item{
    position: relative;
    float: left;
    background-color: #283e56;
    list-style: none;
    text-align: center;
    overflow: visible;
}

.menu-item>a{
    display: inline-block;
    width: 90px;
    height: 60px;
    line-height: 60px;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
}

.menu-item>a:hover,.menu-item>a.active-a{
    color: rgba(255,255,255,0.7);
}

.menu-item.active-li{
    background-color: #1A2B44;
    color: rgba(255,255,255,0.7);
}

.sub-menu-div{
    display: none;
    position: absolute;
    z-index: 100;
    width: 135px;
    left: -22.5px;
    transition: none;
}

.sub-menu-arrow{
    width:0;
    height:0;
    border-width:8px;
    border-style:dashed dashed solid;
    border-color:transparent transparent #283e56;
    font-size:0;
    line-height:0;
    margin: 0 auto;
}

.sub-menu-item{
    list-style: none;
    background-color: #283e56;
}

.sub-menu-item>a{
    display: inline-block;
    line-height: 30px;
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 300;
    width: 100%;
    height: 30px;
}

.sub-menu-item>a:hover{
    color: rgba(255,255,255,0.7);
}

.has-top-line{
    border-top: 0.5px solid #607284;
}

#bg{
    position: absolute;
    width: 100%;
    top:60px;
    left:0;
    transition: none;
    z-index: -999;
    opacity: 0.9;
}

#container{
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    transition: none;
}

.title{
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    color: #555555;
    margin-top: 90px;
    letter-spacing: 0.1rem;
}

.footer-holder{
    height: 40px;
}

/*@media (max-width: 1000px) and (min-width: 801px) {*/
    /*.limit-header{*/
        /*width: 700px;*/
    /*}*/

    /*.limit-article{*/
        /*width: 700px;*/
    /*}*/
/*}*/

@media (max-width:1024px) and (min-width: 721px) {
    .limit-header{
        width: 700px;
    }
    #logo{
        width:230px;
    }

    .limit-article{
        width: 700px;
    }
}

@media (max-height: 750px) and (min-width: 721px) {
    .title{
        margin-top: 60px;
    }
}

@media (max-width: 720px) {
    .limit-header{
        position: relative;
        text-align: left;
        display: block;
        width: auto;
    }

    .limit-article{
        display: inline-block;
        position: relative;
        text-align: left;
        max-width: 900px;
        width: auto;
    }

    .limit-parent-header{
        padding:0 15px;
        text-align: center;
    }

    .limit-parent-article{
        padding:0 40px;
        text-align: center;
    }

    header {
        height: 46px;
    }

    #logo{
        margin-top: 15px;
        height: 16px;
    }

    #logo_description{
        position: relative;
        top: -3px;
        margin-left: 6px;
        height: 9px;
    }

    #right_button {
        display: block;
        float: right;
        width: 28px;
        height: 28px;
        margin-top: 9px;
        cursor: pointer;
    }

    header nav{
        position: absolute;
        top: 46px;
        left: 0;
        z-index: 100;
        margin: 0 -15px;
        background-color: #283e56;
        display: none;
        transition: none;
        padding-top: 20px;
    }

    .menu{
        margin: 0 40px;
    }

    .sub-menu{
        margin: 0;
    }

    .menu-item{
        float: none;
        position: relative;
        background-color: #283e56;
        text-align: left;
        font-weight: bold;
    }

    .menu-item>a{
        display: block;
        width: 100%;
        height: 45px;
        line-height: 45px;
        border-bottom: 0.5px solid #a9b2bb;
    }

    .menu-item>a:hover,.menu-item>a.active-a,.sub-menu-item>a.active-a{
        color: rgba(255,255,255,0.7);
    }

    .menu-item.active-li{
        background-color: #283e56;
        color: rgba(255,255,255,0.7);
    }

    .sub-menu-div{
        display: block;
        position: relative;
        width: 100%;
        left: 0;
    }

    .sub-menu-arrow{
        display: none;
    }

    .sub-menu-item{
        list-style: none;
        background-color: #283e56;
    }

    .sub-menu-item>a{
        display: block;
        line-height: 45px;
        font-size: 0.8rem;
        height: 45px;
        border-bottom: 0.5px solid #a9b2bb;
        padding-left: 60px;
    }

    .sub-menu-item>a:hover{
        color: rgba(255,255,255,0.7);
    }

    .has-top-line{
        border-top: none;
    }

    .last-menu-item a{
        border-bottom: 1.5px solid white;
    }
    .new-menu-item{
        display: none;
    }

    #bg{
        top:46px;
    }

    .title{
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        color: #333333;
        margin-top: 40px;
    }
}
#logo_description{
    display: none;
}

  

插件        

    prefiexfree.min

/**
 * StyleFix 1.0.3 & PrefixFree 1.0.7
 * @author Lea Verou
 * MIT license
 */
(function(){function m(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){var b=a.href||a.getAttribute("data-href");try{if(!b||"stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(p){return}var d=b.replace(/[^\/]+$/,""),f=(/^[a-z]{3,10}:/.exec(d)||[""])[0],h=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],k=/^([^?]*)\??/.exec(b)[1],g=a.parentNode,c=new XMLHttpRequest,l;c.onreadystatechange=function(){4===c.readyState&&
l()};l=function(){var b=c.responseText;if(b&&a.parentNode&&(!c.status||400>c.status||600<c.status)){if((b=e.fix(b,!0,a))&&d)var b=b.replace(/url\(\s*?((?:"|‘)?)(.+?)\1\s*?\)/gi,function(b,a,c){return/^([a-z]{3,10}:|#)/i.test(c)?b:/^\/\//.test(c)?‘url("‘+f+c+‘")‘:/^\//.test(c)?‘url("‘+h+c+‘")‘:/^\?/.test(c)?‘url("‘+k+c+‘")‘:‘url("‘+d+c+‘")‘}),n=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"),b=b.replace(RegExp("\\b(behavior:\\s*?url\\(‘?\"?)"+n,"gi"),"$1");n=document.createElement("style");n.textContent=
"/*# sourceURL="+a.getAttribute("href")+" */\n/*@ sourceURL="+a.getAttribute("href")+" */\n"+b;n.media=a.media;n.disabled=a.disabled;n.setAttribute("data-href",a.getAttribute("href"));a.id&&(n.id=a.id);g.insertBefore(n,a);g.removeChild(a);n.media=a.media}};try{c.open("GET",b),c.send(null)}catch(p){"undefined"!=typeof XDomainRequest&&(c=new XDomainRequest,c.onerror=c.onprogress=function(){},c.onload=l,c.open("GET",b),c.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b=
a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){m(‘link[rel="stylesheet"]:not([data-inprogress])‘).forEach(StyleFix.link);m("style").forEach(StyleFix.styleElement);m("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b,d){if(e.fixers)for(var f=0;f<e.fixers.length;f++)a=
e.fixers[f](a,b,d)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(b){return"-"+b.toLowerCase()})}};(function(){setTimeout(function(){m(‘link[rel="stylesheet"]‘).forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(m){function e(b,d,f,h,k){b=a[b];b.length&&(b=RegExp(d+"("+b.join("|")+")"+f,"gi"),k=k.replace(b,h));return k}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,d,f){var h=a.prefix;-1<a.functions.indexOf("linear-gradient")&&(b=b.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(b,a,d,f){return a+(d||"")+"linear-gradient("+(90-f)+"deg"}));b=e("functions","(\\s|:|,)","\\s*\\(","$1"+h+"$2(",b);b=e("keywords","(\\s|:)","(\\s|;|\\}|$)",
"$1"+h+"$2$3",b);b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+h+"$2:",b);if(a.properties.length){var k=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi");b=e("valueProperties","\\b",":(.+?);",function(a){return a.replace(k,h+"$1")},b)}d&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+h+"$1",b));b=b.replace(RegExp("-"+h,"g"),"-");return b=b.replace(/-\*-(?=[a-z]+)/gi,a.prefix)},property:function(b){return(0<=a.properties.indexOf(b)?a.prefix:"")+b},value:function(b,d){b=
e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b);0<=a.valueProperties.indexOf(d)&&(b=e("properties","(^|\\s|,)","($|\\s|,)","$1"+a.prefix+"$2$3",b));return b},prefixSelector:function(b){return a.selectorMap[b]||b},prefixProperty:function(b,d){var f=a.prefix+b;return d?StyleFix.camelCase(f):f}};(function(){var b={},d=[],f=getComputedStyle(document.documentElement,null),h=document.createElement("div").style,k=function(a){if("-"===
a.charAt(0)){d.push(a);a=a.split("-");var c=a[1];for(b[c]=++b[c]||1;3<a.length;)a.pop(),c=a.join("-"),StyleFix.camelCase(c)in h&&-1===d.indexOf(c)&&d.push(c)}};if(f&&0<f.length)for(var g=0;g<f.length;g++)k(f[g]);else for(var c in f)k(StyleFix.deCamelCase(c));var g=0,e,p;for(p in b)f=b[p],g<f&&(e=p,g=f);a.prefix="-"+e+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<d.length;g++)c=d[g],0===c.indexOf(a.prefix)&&(e=c.slice(a.prefix.length),StyleFix.camelCase(e)in h||a.properties.push(e));
!("Ms"!=a.Prefix||"transform"in h||"MsTransform"in h)&&"msTransform"in h&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var d={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};d["repeating-linear-gradient"]=d["repeating-radial-gradient"]=
d["radial-gradient"]=d["linear-gradient"];var f={initial:"color",grab:"cursor",grabbing:"cursor","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","max-content":"width","min-content":"width","fit-content":"width","fill-available":"width","contain-floats":"width"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,k;for(k in d){var g=d[k],c=g.property,g=
k+"("+g.params+")";!b(g,c)&&b(a.prefix+g,c)&&a.functions.push(k)}for(var l in f)c=f[l],!b(l,c)&&b(a.prefix+l,c)&&a.keywords.push(l)})();(function(){function b(a){h.textContent=a+"{}";return!!h.sheet.cssRules.length}var d={":any-link":null,"::backdrop":null,":fullscreen":null,":full-screen":":fullscreen","::placeholder":null,":placeholder":"::placeholder","::input-placeholder":"::placeholder",":input-placeholder":"::placeholder",":read-only":null,":read-write":null,"::selection":null},e={keyframes:"name",
viewport:null,document:‘regexp(".")‘};a.selectors=[];a.selectorMap={};a.atrules=[];var h=m.appendChild(document.createElement("style")),k;for(k in d){var g=d[k]||k,c=k.replace(/::?/,function(b){return b+a.prefix});!b(g)&&b(c)&&(a.selectors.push(g),a.selectorMap[g]=c)}for(var l in e)d=l+" "+(e[l]||""),!b("@"+d)&&b("@"+a.prefix+d)&&a.atrules.push(l);m.removeChild(h)})();a.valueProperties=["transition","transition-property","will-change"];m.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);

  

about yudian.js

function resizeHook(){
    if(ww<=720){
        var $bf=$(‘#bg-float‘);
        $bf.css(‘width‘,ww+‘px‘);
        var bf_height=ww/720*534;
        if(wh>$bf.offset().top+bf_height){
            $bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘);
        }
    }
}

  

时间: 2024-10-29 00:31:59

一个控制背景的显示公共方法 包括对ie的兼容性的相关文章

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高

这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程

之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnetpager写了一个精简实用的返回分页显示的html方法,其他话不说了,直接上代码. 分页显示信息的实体类:  public class Pager    {        private string _firstPageText;        /// <summary>        ///

[转载]css3的一个控制背景的属性,background-size可以缩放大小啦

background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外. cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同. html: <div class="div" ><h1>雨打浮萍</h1&

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

控制Web对象显示不同实现方法

实现HTML页面中对象的隐藏有两种实现方法:其一是通过style对象的display属性:另外一个是通过visibility属性.二者却存在着微秒的差异,visibility属性规定了元素是否可见,即使不可见的元素也会占据页面的空间,恰好相反,display属性设置的不可见元素则不会占据页面的空间. (原始图) (设置visibility属性) (设置display属性) 从上面可以清楚看出,两者属性之间的布局差异,但是在设置display属性之后,出现了页面显示错位(IE下正常,Chrome与

单元测试时候使用[ClassInitialize]会该方法必须是静态的公共方法,不返回值并且应采用一个TestContext类型的参数报错的解决办法

using Microsoft.VisualStudio.TestTools.UnitTesting; 如果该DLL应用的是 C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\PublicAssemblies\Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll 版本为9.0.0.0 的话,则使用[ClassInitialize]会该方法必须是静态的公共方法,不返回值并且

php处理数据库数据,每处理一个数据返回客户端显示当前状态的方法。

php处理大量数据,每处理一个数据返回客户端显示当前状态的方法. 类似于dedecms生成静态页 想法: 客户端发送请求 服务器端接受请求,开始统计所需处理的数据量 将所需处理数据按一定规则排列,发送到服务器处理端 服务器处理端处理了第一个数据,将处理结果经过一定处理后发送给客户端 客户端接收到结果,自动将处理结果显示并发送到服务器 服务器接收到处理结果 将它转发到服务器处理端 处理端继续处理结果... 循环4-7步骤,直到处理完毕 实验过程: 1.创建数据库和表 create database

通过设置标签class值控制标签的显示与隐藏

需求背景如下: 原项目居民.单位.计量三模块共用一个jsp文件,显示的页面也顺理成章的统一了,幸亏没有调用同一个js,在此基础上要求居民和单位计量的分离,即居民的显示居民的相关信息,单位和计量的显示相同的信息,时间久远,仅有的未修改前的页面截图如下(红框内字段已替换成红字): 需求分析: (1)项目中添加字段并实现增删改查功能 (2)页面的展示,居民显示居民相关字段,单位和计量显示单位相关字段 字段添加这里不再赘述,主要分析页面的显示 刚开始拿到这个需求,打算另外新建单位相关的jsp页面(只包含

20-css控制背景与css精灵

CSS控制背景 背景 background:颜色 图片 平铺方式 固定方式 位置 背景颜色 background-color:red: 背景图像 background-image:url(背景图像的位置及全称) 背景图片的重复方式 background-repeat:[repeat.no-repeat.repeat-x.repeat-y] x坐标y坐标[第一个值是水平位置,第二个是垂直位置]左上角0 0.单位是像素(0px 0px) 背景图像的位置 background-position:top