最近两周写了几页。虽然看起来很简单，但是也考虑到了IE8的兼容性，不同屏幕尺寸的适应性等方面，也算是一个小小的收获。下面记录一下写代码过程中遇到的各种问题和解决方法。头部区域关键点浏览器渲染方式X-UA-Compatible这句话是指IE系列浏览器自带的最高版本运行而不是兼容模式；同时让安装了ChromeFrame的浏览器打开ChromeFrame的渲染模式。IE=edge这句话对11以下的IE有效，IE11默认启用该选项。如果写成IE=9的形式；即=8；IE=7，每个版本的IE都会以自己的版本模式运行，而不是向后兼容。就实际应用而言，推荐使用IE=edge的形式。参考链接：使用IE=edge,chrome=1是否仍然有效？"X-UA-Compatible"content="IE=9;IE=8;IE=7;IE=EDGE"viewport视口手机浏览器为了保证PC端页面能够正常显示，页面渲染在虚拟“窗口”（视口）。视口通常比页面宽，以保证整个页面在手机浏览器中显示。在手机浏览器中，当用户缩放查看页面时，页面的整体布局保持不变。一般来说，为了保证页面在手机浏览器中能正常显示，会加上下面这行。在上面的行中，width属性将视口的宽度设置为等于设备的宽度，即100%CSS像素比例术语。这样设置后，页面在宽度方向上的所有内容都会完整地显示在浏览器中。initial-scale属性在页面初始加载后设置缩放级别为1，这个没什么好说的。至于是否加上禁止用户缩放的user-scalable=0，见仁见智。iPhone和部分Android设备的屏幕尺寸为3-4英寸（7-10厘米），物理像素为320-480（约160dpi）。对于web开发者来说，手机在竖屏状态下的宽度是320px，开发者可以根据这个尺寸来设计网页，同时还要考虑手机在横屏状态下的页面效果，以及页面在iPad和Android平板电脑上的效果。对于160dpi下设计的页面，在240dpi的屏幕上，设置initial-scale=1属性后，页面会缩放到原来大小的150%。文字自然会更清晰锐利，但是位图可能会变得模糊，所以为了保证在这两个dpi下有好的显示效果，需要是最终大小的150%（或者200%，如果还想的话考虑320dpi的retina屏幕的Apple设备），设计页面，根据设备实际情况使用CSS或者viewport合理缩放页面。参考链接：移动端浏览器使用viewportmeta标签控制布局深入理解移动前端开发之viewportNormalize.css为什么使用normalize.css而不是cssreset？官网总结了以下几点：保留好用的浏览器默认样式；规范大量HTML元素的样式；修正浏览器bug，保证各浏览器的一致性；通过微小的改进提高可用性；代码通过注释和详细文档进行解释，让开发人员知道原因。另外normalize.css也支持IE8及更高版本，这也符合自身的开发需求。IE兼容相关未完待续...
