日期:2013-10-08  浏览次数:21186 次

翻译自:Equal height boxes with CSS part II
原文:http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/
这个翻译的页面版权归greengnn所有,转载请注明出处
下面是我翻译的内容,是依据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧

上一篇的问题就是,这个模型对IE来说等同于垃圾,所以基本只能是做来玩玩而已,没有什么实际的用途,如今我要做的就是,
让它也能在IE下更好的显示,所以我又做了第二个模型

xhtml结构类似第一个模型的只是添加一个新的div给IE
<div class="equal">
 <div class="row">
 <div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
 <!--[if IE]>
 <div class="ieclearer"></div>
 <![endif]-->
 </div>
</div>

给xhtml添加一个判断,判断能否为IE,然后给IE一个特殊待遇,在IE显示和别的浏览器不同的代码,对于这个判断IE\MAC优先选择
显示其间的内容。

然后在CSS中也添加一个判断,配合xhtml,用浮动对齐(浮动对齐就不用解释了)的方式来实现容器的等高并排放置,但是还是无法真实的实现等高,你可以采用添加背景颜色的视觉错觉来实现视觉上的等高,或者采用别的方法,这里就不进行说明了。下面是CSS中的代码
<!--[if IE]>
  <style type="text/css" media="all">
.equal, .row {
  display:block;
}
.row {
  padding:10px;
}
.row div {
  display:block;
  float:left;
  margin:0;
}
.row .two {
  margin-left:10px;
}
.row .three {
  width:160px;
  float:right;
}
.ieclearer {
  float:none;
  clear:both;
  height:0;
  padding:0;
  font-size: 2px;
  line-height:0;
}
  </style>
<![endif]-->
到此,整个设计真正的完成了,虽然不够完满,对非IE而做出努力显得有点多余,如今要么IE支持第一个模型,要么我们可能会想出更好的方案来。但是这次尝试是有价值的。