修复CSS的Width属性设置为100%的显示漏洞

不知道做前端的朋友有没有发现CSS有一个很蛋痛的漏洞,这个Bug就是:当width属性设置为100%后,把浏览器的宽度调整到小于刚才的宽度时,然后用滚动条往右移动,被设置了100%宽度的地方就会出现空白。

我使用了JQuery来修复这个显示的漏洞,源码如下:

$(function(){
    
    fixwidthbug();
    $(window).resize(function() {
        fixwidthbug();

    });

    function fixwidthbug(){
        var window_width = $(this).width();
        var my_width = 800;

        if(window_width < my_width){
            my_width += 20;

            $('.header').css('width', my_width + 'px');
            $('.navi').css('width', my_width + 'px');
        }else{
            $('.header').removeAttr('style');
            $('.navi').removeAttr('style');
        }
    }
})

[注意]

使用JQuery当然要先引用JQuery包,我在这里就偷懒了一下不写了!

标签:修复, css, width, 属性, 设置, 100%, 显示, 漏洞

该文章由 Shiqi Qiu 原创并发布在 被遗忘的曙光 技术博客

转载请标明来源:http://blog.fdawn.com/Front-End/5.html

已有 3 条评论

  1. 红博

    过来看看,不过这漏洞我还没注意到,呵呵。

  2. Staysha

    Now we know who the seinsble one is here. Great post!

  3. Staysha

    Now we know who the seinsble one is here. Great post!

添加新评论