这篇文章给大家介绍如何解决DIV+CSS建站时对浏览器的兼容性问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
DIV+CSS建站对浏览器的兼容性问题和注意事项
使用DIV+CSS构架好处不少,但也确实存在一些问题,现在让网页设计师最头疼的事莫过于DIV+CSS对浏览器的兼容性了,可能你用惯了IE6,做出来的东西没感觉到有多大异常,但是把同样的东西放到IE7里去看的话,就会发现很多问题,如果放到火狐浏览器里去看,结果更不尽人意。
一个页面从制作的开始就决定了他要使用的浏览器解析css模式,浏览器模式的不同,就造成了各个浏览器对页面显示的差异。浏览器解析css有两种模式,quirksmode和strictmode,目前正在使用的浏览器这两种模式都支持,在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirksmode呈现,其他的则使用strictmode解析。
这两种模式***的不同就是提现在对盒模式的解释上。什么是盒模式?这是针对块级元素说的,这里简单说一下,说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。而区别就是产生在width属性上。
◆在strictmode中:
width是内容宽度,也就是说,元素真正的宽度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
◆在quirksmode中:
width则是元素的实际宽度,内容宽度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
DIV+CSS建站时要注意的事项:
◆内联元素,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。注2.内联元素(display:inline)内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
◆浮动元素(无论左或者右浮动)边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
◆如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。
◆边界值可为负,其显示效果各浏览器可能不相同。
◆填充值不可为负。
◆边框默认的样式(border-style)为不显示(none)
其他注意事项:
1.float的div一定要闭合,即清除浮动
示例:(其中floatA、floatB的属性已经设置为float:left;)
<div> <dividdivid="floatA"></div> <dividdivid="floatB"></div> <dividdivid="NOTfloatC"></div> </div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
所以得在<divid="floatB"></div>后边加清除浮动<divclass="clear"></div>
定义如下.clear{clear:both;}
2.注意margin加倍的问题
现在DIV+CSS布局里用的最多的要数margin和padding了(为了兼容性都尽量少用),设置为float浮动后的div在ie下设置的margin会加倍,所以要在这个div里面加上display:inline;
示例:<divid="FloatA"></div>
相应的css为
#FloatA{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }
说了这么多,归根结底还是CSS的解释问题,所以在以后制作DIV+CSS页面时要遵循W3C标准,声明doctype,让浏览器按strictmode模式解析CSS,时刻注意IE6、IE7及火狐浏览器的差异,就会避免很多兼容性问题,做出更好的作品来。
关于如何解决DIV+CSS建站时对浏览器的兼容性问题就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。