来看看：各类跨扫瞄器兼容的CSS编码原则和技能

这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+CSS+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了
破洛洛文章简介：CSS编码原则和技能(完善跨扫瞄器兼容).
良多人以为，完善的跨扫瞄器兼容其实不需要，如许说固然没错，但在良多情况，一种近似的兼容仍是很简单完成的，本文讲的是各类跨扫瞄器兼容的CSS编码原则和技能。作为Web计划师，你的网站在各类扫瞄器中有完整一样的体现是良多人的方针，但是这是一个永久没法真正完成的方针，良多人以为，完善的跨扫瞄器兼容其实不需要，如许说固然没错，但在良多情况，一种近似的兼容仍是很简单完成的，本文讲的是各类跨扫瞄器兼容的CSS编码原则和技能。

登录/注册后可看大图

了解CSS盒子模子

假如你想完成不必要良多奇巧淫技的跨扫瞄器兼容的CSS代码，透辟地舆解CSS盒子模子是主要事变，CSS盒子模子其实不难，且基础撑持一切扫瞄器，除某些特定前提下的IE扫瞄器。
CSS盒子模子卖力处置以下事变:

• 一个blcok（区块）级工具占有多年夜的空间
  
• 该工具的界限，留白
  
• 盒子的尺寸
  
• 盒子与页面别的元素的绝对地位
  

CSS盒子模子有以下原则:

• Block（区块）工具都是矩形（现实上一切工具都云云）
  
• 其尺寸由width,height,padding,borders,和margins决意
  
• 假如不设置高度，该盒子的高度将主动顺应其包括的内容，加上留白等（除非利用了float）
  
• 假如不设置宽度，一个非float型盒子程度大将充斥其父容器（扣除父容器的留白）
  

处置block级工具时，必需注重以下事项:

• 假如一个盒子的宽度设置为100%，它就不克不及再设置margins,padding,和borders，不然会撑破其父容器
  
• 垂直毗连的margin会引发庞大的坍塌成绩，招致结构成绩（好比两个垂直毗连的Block工具，下面的工具的bottom-margin为40，上面的工具的top-margin为20，则两个工具的间距将是40，而不是60-译者）
  
• 具有绝对地位和相对地位的工具，具有分歧的举动
  

登录/注册后可看大图

在Firefox的Firebug中显现的盒子模子

了解block级和inline级工具的区分

这个看似复杂的成绩事假如能透辟地舆解，会受益不浅。
下图解说了block级工具和inline级工具的区分:

登录/注册后可看大图

上面是block级工具和inline级工具的基础区分:

• Block级工具会天然地程度充斥其父容器，因而没有需要为之设置100%宽度属性
  
• Block级工具的肇端摆放地位是其父容器的左上界限，并顺排在其后面的兄弟Block工具的下方（除非设置float或相对地位）
  
• Inline级工具会疏忽其宽度和高度设置
  
• Inline级工具会跟着笔墨排版，并受排版属性的影响（如white-space,font-size,letter-spacing）
  
• Inline级工具可使用vertical-align属性把持其垂直对齐，block级工具不成以
  
• Inline级工具的下方会保存一些天然的空间，以顺应字母g一类的会向下探出的笔划
  
• 一个设置为float的inline工具将酿成block工具
  

了解Floating和Clearing属性

完成多栏排版的最好办法是利用float属性，float也是一个将使你受益不浅的属性。一个float工具能够居左或居右，一个设置为float的工具，将依据设置的偏向，左移或右移到其父容器的界限，或其后面的float工具的界限，而紧随厥后的非float工具或内容，则包抄在其相反的偏向。

登录/注册后可看大图

以下是利用float和clear属性的一些主要原则:

• 一个float工具，将从其置身的block级非float内容流中跳出，换句话说，假如你要将一个box向右边float，它前面的block级非float工具会显现到下方，inline级内容会在中间包抄
  
• 要让一段内容从一侧包抄一个float工具，这段内容必需要末是inline级的，要末也设置为不异偏向的float
  
• 一个float工具，假如没有设置宽度，则会主动缩成其包括的内容的宽度，因而最好为float工具明白设置宽度
  
• 假如一个block工具包括float子工具，会呈现本文中论述的成绩。
  
• 一个设置了clear属性的工具，将不会包抄其后面的float工具
  
• 一个既设置了clear又设置了float属性的工具，只要clear:left属性失效，clear:right不起感化
  

起首利用IE举行测试

固然我们都仇恨IE6和IE7，但当你入手下手一个新项目标时分，最好仍是起首针对这两种扫瞄器举行测试，不然，假如你在计划在前期才想起针对IE6和IE7举行测试，将呈现以下成绩：

• 你将不能不利用一些奇巧淫技，乃至利用自力的IE6/7CSS，招致CSS文件痴肥。
  
• 某些中央的结构将不能不从头计划
  
• 会增添测试的工夫
  
• 你的结构在IE/6/7中和别的扫瞄器中纷歧样
  

假如你计划的是团体项目，Web程序等，则不倡议你针对旧版本IE做太多事情，而对一些公司类站点，它的用户群中有大批IE用户，这些技能会让你制止大批的头痛。假如将IE的成绩回类为IE的BUG而不去向理，会带来良多负面的影响，和IE战争共处是Web开辟与计划者不成回避的实际。
译者注：在IE6/7仍有大批用户基本的国际（感激中行，建行，农行，工行，和各级当局网站），无视这两种扫瞄器是极不明智的，起首针对IE6/7举行计划是一种很好的办法，一样平常来讲，在IE6/7经由过程测试的站点，在Firefox，Chrome，Safari，Opera等尺度扫瞄器眼前基础不会呈现成绩，条件是，你的CSS计划是基于W3C尺度的。
IE扫瞄器最多见的成绩

• IE6中不成滥用float，不然会带来内容消散和笔墨反复等八怪七喇的成绩
  
• IE6中，float工具，在float偏向的何处，会呈现双倍margin，将display设置为inline会办理这个成绩
  
• IE6/7中，一个没有间接或直接设置hasLayout的工具，会产生各类八怪七喇的成绩（译者注：对这类成绩，zoom这个css属性能够帮很年夜的忙，将zoom设置为除normal以外的别的值，能够迫使一个工具hasLayout同时不影响这个工具的任何视觉表面）
  
• IE6不撑持min-width,max-width,min-height,max-height一类的属性
  
• IE6不撑持流动地位背景图
  
• IE6/7不撑持良多display属性值（如inline-table,table-cell,table-row）
  
• IE6中，只要a这个工具才可使用:hover这个伪类
  
• IE的某些版本对某些CSS选择器撑持很少（如属性选择器，子工具选择器）
  
• IE6~8对CSS3的撑持很无限(不外有一些变通办法)
  

永久不要期望在一切扫瞄器中都千篇一律

在分歧扫瞄器完成不异的体验个功效是大概的，完成近似像素级的分歧表面也是大概的，但永久不要期望千篇一律。
Form控件在分歧扫瞄器显现老是分歧


以下是Facebook首页中的select控件，在5种分歧扫瞄器的显现差别（基于Adobe’sBrowserlab截图）

登录/注册后可看大图

某些Form控件，假如请求必需跨扫瞄器分歧，能够找到变通举措，如，可使用图片替换submit按钮，但有一些控件，好比radio，select，textarea，文件选择框，是永久都不成能千篇一律的。
字体的体现都有差别

先不谈有的字体在有的体系中基本不存在，立即存在，它们在分歧体系的衬着效果也不完整一样，好比，WindowsClearType撑持IE7，但不撑持IE6，招致统一个字体在IE7和IE6有分歧的模样。

登录/注册后可看大图

AListApart’s文章字体在IE6andIE7中的区分

利用CSS清零

利用CSS清零（CSSReset）是完成跨扫瞄器兼容的灵丹灵药，CSS清零能够打消分歧扫瞄器对margin，padding这些属性的默许体现，你能够更简单把持诸如对齐，间隙等等成绩。保举利用EricMeyer’sCSS清零代码。

登录/注册后可看大图

参考SitePoint’sCSS兼容表

SitePointCSSReference是一个十分好的资本（下载离线版），能够用来反省某些CSS属性的跨扫瞄器兼容成绩

登录/注册后可看大图

结语

跨扫瞄器兼容是个永久的话题，本文先容的跨扫瞄器兼容CSS原则只是匡助Web开辟计划者尽量完成这一方针，除这些，基于CSS3的渐进式加强计划也是一种趋向，Web开辟与计划者能够针对某些扫瞄器供应加强功效，而在不撑持这些加强功效的扫瞄器中升级利用基础功效。
</p>
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。