纸牌十三水可以作弊吗|丽州十三水辅助
新疆远璨网络

DIV+CSS建站对浏览器的兼容性问题和注意事项

发布时间:2019-09-26 10:03:56   信息来源:乌鲁木齐企业网站制作   发布作者:远璨网络


    使用DIV+CSS构架好处不少,但也确实存在一些问题,现在让网页设计师最头疼的事莫过于DIV+CSS对浏览器的兼容性了,可能你用惯了IE6,做出来的东西没感觉到有多大异常,但是把同样的东西放到IE7里去看的话,就会发现很多问题,如果放到火狐浏览器里去看,结果更不尽人意。

    一个页面从制作的开始就决定了他要使用的浏览器解析css模式,浏览器模式的不同,就造成了各个浏览器对页面显示的差异。浏览器解析css有两种模式,quirks mode和strict mode,目前正在使用的浏览器这两种模式都支持,在doctype声明中, 没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。

    这两种模式最大的不同就是提现在对盒模式的解释上。什么是盒模式?这是针对块?#23545;?#32032;说的,这里简单说一下,说白了就是把块?#23545;?#32032;想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。而区别就是产生在width属性上。

    在strict mode中:
    width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

    在quirks mode中:
    width则是元素的?#23548;?#23485;度 ,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

    其他要注意的事项:
    ·内联元素 ,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一?#24615;?#32032;的距离由行高决定,而不是填充或边界。 注2. 内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
    ·浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
    ·如果盒中没有内容,则即使定义了宽度和高度都为100%,?#23548;噬现?#21344;0% ,因此不会被显示,此点在采取层布局的时候需特别注意。
    ·边界值可为负,其显示效果各浏览器可能不相同 。
    ·填充值不可为负 。
    ·边框默认的样式(border-style)为不显示(none)

    下面来说说IE6,IE7及FF火狐浏览器的区别和兼容方法:
1. IE7与IE6相比, 有多达200多处改进, 但它们都是在Strict Mode下实现的, 即在页首声明DocType为XHTML Transitional, XHTML Strict等. 而在Quirks Mode下, IE7和IE6别无二致。所以为了更好的兼容,尽?#21487;?#26126;DocType,采用Strict Mode进行制作。
2. IE7支持Alpha通道的PNG图片, 但是这些Alpha通道图片在IE6下还是不能正常显示的,所以还是尽量使用透明GIF图片。
3. IE7盒子模型改变了:盒子对于"overflow"使用了"visible"默?#29616;?所以对于子元素尺寸大于父元素尺寸时, IE7会和Firefox一样将子元素露出于父元素之外显示, 而不是像IE6那样把父元素撑大了包含子元素.把页面设置成"overflow:visible"即可。
4. 设置为float的div在ie下设置的margin会加倍。这是一个ie6存在的bug。解决方案是在这个div里面加上"display:inline"。
5. IE和火狐对'width'定义的不同:
     Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度;
     IE中:内容宽度=您定义的容器宽度(Internet Explorer 'width')-padding宽度-border宽度
     (Internet Explorer 'width'则是指整个容器的宽度,包括内容,padding ,border)

6. css布局的居中问题:FF火狐里设置margin-left, margin-right 为 auto 时已经居中, IE则设置body {TEXT-ALIGN: center;} 才行
7. FF火狐设置padding后, div会增加height和width, 但IE不会, 故需要用 !important 多设一个height和width
8. 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}
9. ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
10.终结解决方法:
    (1)!important:FF火狐和IE7对于"!important"会?#36828;?#20248;先解析,IE6则忽略,可用!important为FF火狐和IE7单独设置样式,不影响IE6的显示,值得注意的是,一定要将xxxx !important 这句放置在另一句之上。
       示例:div{margin:30px!important;margin:15px;} //在FF火狐和IE7中margin:30px,在IE6中margin:15px;
    (2)由于FF火狐和IE7都支持"!important",而二者之间也存在差异,所以有时?#19981;?#20986;现一些小问题,针对IE7可以使用使用"*+html",
       示例:#example { color: #333; } /* FF火狐下字体颜色显示为#333 */
             * html #example { color: #666; } /* IE6下字体颜色显示为#666 */
             *+html #example { color: #999; } /* IE7下字体颜色显示为#999 */

    其他注意事项:

1. float的div一定要闭合,即清除浮动
   示例:(其中floatA、floatB的属性已经设置为float:left;)
         <div>
           <div id="floatA"></div>
           <div id="floatB"></div>
           <div id="NOTfloatC"></div>
         </div>
   这里的NOTfloatC并不希望继续平移,而是希望往下排。这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
   所以得在<div id="floatB"></div>后边加清除浮动<div class="clear"></div>
   定义如下.clear{clear:both;}
           
2. 注意margin加倍的问题
   现在DIV+CSS布局里用的最多的要数margin和padding了(为了兼容性都尽量少用),设置为float浮动后的div在ie下设置的margin会加倍,所以要在这个div里面加上display:inline;
   示例:<div id="FloatA"></div>
         相应的css为
         #FloatA{
             float:left;
             margin:5px;/*IE下理解为10px*/
             display:inline;/*IE下再理解为5px*/
          }

说了这么多,归根结底还是CSS的解释问题,所以在以后制作DIV+CSS页面时要遵循W3C标准,声明doctype,让浏览器按strict mode模式解析CSS,时刻注意IE6、IE7及火狐浏览器的差异,就会避免很多兼容性问题,做出更好的作品来

乌鲁木齐网站制作、乌鲁木齐网站推广、乌鲁木齐网站排名、网站开发、新疆网站建设、新疆网站推广、新疆网站排名找远璨网络,诚信合作共赢的态度,为你提供更多的网站建设服务!咨询电话:0991-4549085

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

售后保障

网站制作不难,难的是一如既往的热情服务及?#38469;?#25903;持。我们知道:做网站就是做服务,就是做售后。

纸牌十三水可以作弊吗 福彩福建快3走势图一定牛 什么app可以买时时彩 今晚福建22选5开奖结果 十河北十一选五走势图 篮球胜分差怎么看的 云南快乐十分开奖号码查询 股票融资融券业务 泳坛夺金8选4中奖技巧 时时彩计自由的百科天堂 河北快3走势图表