今年在制作 Comsenz 网站的时候，除首页外使用了绝对定位的布局，但是，在后来发现了一个问题，就是在 IE6 下不能正常选择绝对定位的元素内的文字（即当元素的被设置 position:absolute; 时，将引发此问题，relative 不会出现这种问题）。在网上搜了搜，解决的办法就是进入 Quirks Mode 模式，很明显，这并不是我想要的，那么我现在面临两条路：一是放弃绝对定位的布局方式，一是找到解决方法。当然，我并不愿意放弃这种布局模式，因为我感觉使用起来确实很方便，那么我该如何去解决在 IE6 下的问题呢？

在做这个网站的最初，我就决定不用不符合标准的 HACK，而尽量去使用条件注释解决 IE 下出现的问题，因此，我通过条件注释为 IE6 单独设置了一个特殊的 CSS 文件。那么现在我要做的就是让盒子在除 IE6 外的浏览器上使用绝对定位布局，而在 IE6 内使用浮动来布局。

继续阅读 »

本篇文章原文地址：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。

译文内容：

当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。

旧的方法

经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信这也是很多设计师喜欢做的事情。首先，我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离，然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。

现在让我们来看一下这种方法的代码以及它所带来的问题：

CSS 代码：

html,body{
    height:100%;
    margin:0;
    padding:0;
}
body{
    background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
    text-align:center;
    min-width:626px;
    min-height:400px;
}


vert-hoz{

position:absolute;
top:50%;
left:50%;
margin-top:-198px;/* half elements height*/
margin-left:-313px;/* half elements width*/
width:624px;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;


}
h1 {color:#fff;margin:0;padding:0} 

HTML 代码：

<div id="vert-hoz">
    <h1>Content goes here</h1>
</div> 

你可以在这里看到这段代码的展示。

我为它设置了一个背景图片，仅仅是为了让它看起来更舒服一些，而我们真正需要注意的部分是中间那部分灰色的区域。

继续阅读 »