修复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 原创并发布在 被遗忘的曙光 技术博客

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