南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

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

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

我的 HTML 结构为：

<div id="content">
	<div id="left"></div>
    <div id="right"></div>
</>

现在我要做的就是为 IE6 和其他浏览器设置不同的 CSS 代码，我是这么做的：

在全局的 CSS 文件里这么定义：

#content>#left, #content>#right { position:absolute;}

而在特定的 IE6 的 CSS 文件中这么设置：

#content #left { float:left;}
#content #right { float:right;}

这样子就很好的解决了 IE6 下不能正常选择文字的问题，当然如果你没有单独为 IE6 写一个 CSS 文件也是可以做到的，可以这么在 CSS 文件中书写：

#content #left { float:left;}
#content #right { float:right;}
#content>#left, #content>#right { float:none; position:absolute;}

可以根据你的习惯来做把，尽量不用 HACK，它根本没有使用的必要。

关于 Quirks Mode 的相关知识，大家可以到这里来看下。

标签： IE6, Quirks, 绝对定位

这篇文章发布于 2008年07月22日，星期二，16:49，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。