Internet Explorer——前端攻城师的的恶梦，十个有九个前端人员都认为他为祸人间不浅，本应早点灭掉他，可是上天有好生之德，因而没有灭之，在此情况下，前端的攻程师们将就将就过吧。前面在《浏览器兼容之旅的第一站:如何创建条件样式》和《浏览器兼容之旅的第二站:各浏览器的Hack写法》中了解了一些处理兼容的基本方法。那么这节开始浏览器兼容之旅的第三站:IE常见Bug，在本节中，您可以了解IE中常见的Bugs，以及这些Bugs要如何去避免发生，或者发生了，我们将如何去解决他。大家有兴趣吗？有兴趣的童鞋们就开始我们的旅行吧。

前面一节《浏览器兼容之旅的第一站:如何创建条件样式》和大家一起探讨了如何创建条件样式，了解和学习了创建IE条件样式的方法以及他们所起的作用，特别是知道了条件注释所起的作用。。那么这一节将和大家一起学习：浏览器兼容之旅的第二站:各浏览器的Hack写法

虽然和大家在一起学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。”下面我们先来简单的了解一下什么是CSS Hack。

IE对于大家来说一定很熟悉了，作为一名Web前端开发人员或者是说前端攻程师来说，浏览器的兼容问题一定处理过不少了，特别是IE6的兼容问题，如果你的用户是针对中国市场来说，IE6下的效果是必须得处理了，一个让人头痛而又不得不去面对的一件事情，特别是对于刚接触CSS的童子们，更让无从下手，那么今天我重新开始针对浏览器的兼容问题，说说一些我自己的经验，以及尽可能多的搜集相关经典问题的处理方法。希望能对有需要的朋友有所帮助。

中国古语——万物都是相生相克的。这句话用到我们写CSS的人身上也是一样的，不管在哪个浏览器下，出现了问题，首先要追究的问题是我们自己怕HTML结构和CSS样式有没有出问题，然后在看看是不是因为浏览器各自的解析不同而造成的。千万不要一看到IE出问题，就骂上了ＩＥ，其实人家并不是那么差劲，另外有一点也需要注意的就是，不要动不动就使用你知道的HACK手段来解决各浏览器的兼容问题。小生有自己的一个原则——“处理各浏览器的兼容问题，未到情非得以的情况下才使用HACK”。

开头来了一大段的开场白，下面我们就开始我们的旅行——浏览器兼容之旅的第一站：如何创建条件样式。

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示：

那么今天主要和大家一起学习如何将页脚固定在页面的底部？

做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。

曾经拜读过张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文，从中学会好几种关于图片水平垂直居中的方法，而今天我要和大家一起探讨的是其他几种关于图片水平垂直居中的方法。

作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对于我这样的初学者有一定的帮助。

用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。

方法一：

这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。

Html Markup

				<div class="vertical">content</div>
			

CSS Code:

<hr>标签是html4用来制作水平线的。如果你在网页制作中使用了<hr />标签来制作水平分隔线，你知道在没有样式设置的情况下，他是很难看的。<hr/>在各浏览器的显示常常是100%的宽度，2px的高度,3D边框风格渲染。默认情况是不太好看，或者也不符合你的网页风格，但是你给<hr/>标签设置了样式，这样他看起来就不会那么难看，同时也更能适合你的页面风格。但是，你千万要小心，因为有一些浏览器对<hr/>渲染出来的风格是不一样的。大家先来看一朋友在其页中运用的<hr/>在Firefox 和ＩＥ下的效果：

从上图中很明显得知，你在样式中设置<hr/>的边框样式，在各浏览器下显示是不一样的

				hr {border-top: 1px solid #ddd;}
			

此时在IE下显示是1px的边框线；但在Firefox,Opera等浏览器下显示的却是2px的边框，如果你把边值从新设置：

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

上一节在《OOCSS——概念篇》中主要介绍了一些有关于OOCSS的概念性的东西，并以博客的“meta data”为例介绍了如何创建一个基础对象。赞同和反对使用OOCSS的声音都有，对这个感兴趣的朋友可以不用理会这些反对的声音，因为那些声音是无法阻挡我们对新知识的渴望。今天主要想借助OOCSS官网提供的相关资料，一起来学习Nicole Sullivan写的OOCSS核心东西。

“Object Oriented”直译就是面向对象，对于这个词，大家并不陌生，但是加上一个CSS也就是说Object Oriented CSS，对于这个还是第一次见过，被叫作OOCSS(面向对象的ＣＳＳ)，其实这个东西早在2008年被提出，有些同学也在自己的项目中用过了。但有很多同学并不清楚，就拿我来说，我一开始还以为OOCSS是一个新语言或者是CSS框架，其实都不是，他只不过是一种新的写法。那么下面就通过“什么是OOCSS”,“OOCSS理论”等几个部分和大家一起来学习OOCSS。