DIV 边距特性在Chrome和IE中的差别深层次了解

日期:2020-09-24 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

忽然间,在Chrome下看起来很齐整的合理布局,在IE下变为1团糟。以便找出缘故,我修改了div的background-color特性。最终,发现同1个DIV的宽度在IE和Chrome下却不1样。这大夜里的,简直怪吓人滴!
以后,做了个检测。当:

拷贝编码
编码以下:

div1
{
width:960px;
margin:0px;
padding:0px;
}

这时候,在两个访问器下是沒有差别滴!总宽度均是960px。
可是,当:

拷贝编码
编码以下:

div1
{
width:960px;
margin:0px;
padding:0px 10px 0px 10px;
}

这时候,Chrome就不干了。她竟然把padding的20px加在了外面,这样div1的总宽度便是960px+10px+10px=980px;而,在IE中div1的宽度还是960px;
依照我的逻辑思维,觉得padding应当算在width里边滴,想不到Chrome这么倔。
历经检测,border和padding1样,margin的值均算在“width”的外面。
也有,在沒有设定float的状况下,Chrome会把div1当做position:absolute,而IE会把其当做poisttion:relative;因此,尽可能都这是块级元素的float为left!
真悲催,访问器兼容问题让我这个外行人很痛楚呀!