Pivot Code » BUG http://www.pivotcode.com 欢迎来我的小思想绽放的地方…… Sun, 30 Oct 2011 13:37:24 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 IE6固定定位position属性fixed BUG http://www.pivotcode.com/ie6-position-fixed-bug/ http://www.pivotcode.com/ie6-position-fixed-bug/#comments Wed, 03 Mar 2010 04:53:25 +0000 Vidar Liu http://www.pivotcode.com/?p=430 当需要把一个元素永远固定在浏览器的一个位置的时候，那么就需要用到position的fixed属性。然后用top和left设置元素的位置。

这个效果也应用在人人网的个人首页底部的工具栏。

常去人人网的朋友肯定会发现，如果用IE6浏览器访问人人网的话，这个工具条以前是不存在的。后来，人人已经通过js实现此功能，但是它的效果和正常浏览器下访问是不同的，即每当拖动滚动条它就会隐藏，当停止时再出现。所以，值得肯定的是IE6不支持这个position的fixed属性。

这个问题也一直都在困扰着我，因为我一直都在想把这个效果实现在我的一个项目上，而又避开使用javascript。

后来在‘幸福收藏夹’博客，找到了解决方案——利用position:absolute定位在IE6下实现固定定位的效果，以下是实现原理：

fixed元素的绝对位置相对于HTML元素，滚动条则是基于body元素而不属于html元素。
当我们拖动滚动条滚动的时候，内容都会随窗口滚动，这时滚动的是body元素。HTML元素被浏览器判定为相对定位的根级元素，而我们定义的position:absolute元素也在HTLML元素当中，属于HTML元素的子元素。因此我们所定义的absolute元素会根据HTML元素的大小而进行绝对定位。如果我们未曾对HTML元素设置样式的情况下，它的大小是随内容的大小而变的,这样一来如果我们在其中使用绝对定位，并不能实现我们想得到的固定定位的效果。因此我们需要给我们需要绝对定位元素的相对定位盒模型指定一个绝对大小，即窗口当前的大小。但是body元素仍需保持其原有大小，否则就没有滚动条了。这时我们需要将超出HTML元素的内容隐藏掉，就可以让HTML元素永远保持在一个固定大小了。

代码如下：

html{overflow:hidden;} // Important（必须）。
body{overflow:auto;height:100%}

代码规定了html将只有当前窗口的大小，溢出的内容隐藏。但是body仍会随高度自动变化。于是我们就可以利用position:absolute来把元素固定在窗口任意位置了。例如仿人人网定位元素在底边：

示例的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6-position-fixed-bug</title>
<style>
* {
	padding:0;
	margin:0;
}
html{_overflow:hidden;}/*IE6hack,必须*/
body{height:100%;overflow:auto;}
#footer .bottom {
	width:580px;
	height:20px;
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	_position:absolute;/*IE6hack,必须*/
	bottom:0;
	left:50%;
	margin-left:-290px;
}
</style>
</head>
<body>
<div>
<h1>测试定位</h1>
占位文字
</div>
<div id="footer">
  <div class="bottom"></div>
</div>
</body>
</html>

注：本文参考自幸福收藏夹

相关日志

]]> http://www.pivotcode.com/ie6-position-fixed-bug/feed/ 3 也谈IE6下block元素float多出文字BUG http://www.pivotcode.com/ie-6-overflow-element/ http://www.pivotcode.com/ie-6-overflow-element/#comments Tue, 01 Dec 2009 06:28:17 +0000 Vidar Liu http://mingsenliu.com/?p=113 最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。

我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。

但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。

我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。

【css部分】

@charset "utf-8";
/* CSS Document */
ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/
ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/
ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/
 
/*分别定义需要的列span元素的宽度*/
ul li span.listOne{width:300px;}
ul li span.listTwo{width:200px;}
ul li span.listThr{width:100px;}
ul li span.listFou{width:100px;}
ul li span.listFiv{width:100px;}

【html部分】

 
 
 
 
 
 
<ul>
 
	<li>
<span>帖子列表</span>
<span>帖子分类</span>
<span>发布者</span>
<span>最后回复</span>
<span>发布时间</span></li>
 
 
	<li>
<span><a href="#">这里是帖子标题</a></span>
<span><a href="#">这里是帖子分类</a></span>
<span><a href="#">发布者姓名</a></span>
<span>回复者姓名</span>
<span>2009-10-10 20：10</span></li>
 
</ul>

这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示

overflow

代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。

以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：

“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”

另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决

相关日志

]]> http://www.pivotcode.com/ie-6-overflow-element/feed/ 4