文本偏移

最新推荐文章于 2021-06-27 13:58:19 发布

翻译最新推荐文章于 2021-06-27 13:58:19 发布 · 885 阅读

文章标签：

#ie #class #xhtml #div #浏览器 #html

bug库专栏收录该内容

2 篇文章

订阅专栏

几天之前写下了 IE Factor 这篇文章之后，我就想着我应该要举一个上礼拜让我抓头的例子。我也提供了我提出的解决方案，就像我周一所描述的：很烦实现不了效果，这促使我去做一些绝对没有意义的尝试。

这种bug没有例外，这需要做许多看起来机会渺茫得可怜的尝试去找出方法来修复它。我也提出了IE的几种不同组合，这几乎能让写CSS的人疯掉，这些IE的bug不是IE5.0的，而是IE5.5的，IE5.5当然会比它的前辈IE5.0在CSS实现方面好得多，但是伴随着IE5.5的发布和提高，一些IE5.0中没有的新bug又出现了，这些同样的bug同时被带到了IE6中.

问题：将一些200像素宽的内容盒子（这里我称之为”模块“）作垂直方向连续排列，这几乎是最原始的，一点也不复杂，每个模块都由一个大标题<h2>标签，标题后跟一个段落<p>标签组成。

我提供的例子已经被精简了，几乎没有任何的设计成份，我只是让标题的文字变小了点，减小了<h2>中的距离顶部和底部的边距。因为我正创建的模块，边框只出现在两侧，我要让它变得更夸张以使bug变得更明显。为了看出它的异常，请在IE5.5或者IE6下看这个存在bug的例子，然后在其它正常的浏览器下看一下正常的结果。如果很不幸你没有IE5.5或者IE6，我这儿提供了第一个和最后一个模块的快照，这是在IE6下得到的结果

注意观察每个模块下文字是怎么样离左侧越来越远的。这个bug从第二个模块中开始出现，在它以下的模块中bug变得越来越糟糕，直到最后一个模块，你会发现它已经被模块的容器覆盖切除了。随着越来越多的模块被添加，IE5.5和IE6下这个bug将会被无限放大，其它浏览器都不会发现这个问题，会返回正确的结果。

很明显，这个问题是不能被接受的。我不知道客户会在这个侧边栏堆积多少个模块，我尝试了书中提到的每一个方法来阻止文字向左偏移。这个问题似乎很难理解，因为每个都相邻的而且独立的模块。代码是完全有效的，彼此也没有容器重叠，我尝试着用200像素的边框，也没有效果，我移掉了内边距改成外边距，移掉了标题，很不幸，都不行。

我走开了，去吃午饭，回来之后就找到了问题的根源，我发现每个模块之间文字往左偏移的像素增量是4像素，这时，每个边框就只有2像素框，所以模块之间的文字偏移量到左和右边框之间的宽度都是相等的，我移掉边框，bug消失了（看这个例子）

好的，这是边框问题，但是我要实现的效果不能没有边框，我尝试给顶部和底部加边框，太漂亮了！问题解决了。结果证明缺一个底部边框（可以是任何宽度值）来修复这个bug，为什么少一条底部边框会影响页面上的另外一个元素，这一点意义都没有，但在IE5.5和IE6上，它的确如此

所以这个bug最终可以被如下描述：如果在一个元素中只有左右边框，没有底边框，第一个元素的侧边框将会影响紧挨着的下一个元素中文本的位置。

为了修复这个例子中的bug，我给每个模块加了一个1像素的底边框，同时确保它的颜色和最明显的模块背景色一致（在这个例子中，背景色和底部边框都是白色），因为在其它浏览器中这个底部边框是不必要的，所以我也不想让它出现在这儿，我加了一条规则以避免其它浏览器中出现这条底边框：

.module {
  margin:0 0 15px;
  border:4px solid #666;
  border-width:0 4px;
  border-bottom:1px solid #fff;
  padding:2px 10px;
  }
html>body .module {
  border-bottom-width:0;
  }

通过使用一个子选择器，最终将会隐藏所有浏览器的底边框（除IE5.5和IE6）。（请看最终效果）我也发现给所有模块添加一个宽度值也能解决这个文本偏移问题。但是IE5/win's破坏了盒模型，如果使用了左边距和右边距，这个问题需要被修复，这个时候每个独立模块的宽度就不必要被指定了，只需要给它们的父元素#sidebar添加宽度就可以了，所以我开始使劲的添加/删除底部边框以避免重新定义模块的宽度。

这只是延迟我最近项目的一个无法解释的bug，如果任何一个人遇到同样的bug，希望这个例子可以帮你省省头发，让他们不必这么沮丧。

文章出处：http://stopdesign.com/archive/2004/01/30/ie_factor_example.html

英文不好，粗略的翻译了一下，欢迎拍砖！

以下是我的源码：

1.存在bug的源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>文本向左偏移</title>
		<style type="text/css">
			#sidebar {
				width: 200px;
			}
			.module {
				margin: 0 0 15px;
				border: 4px solid pink;
				border-width: 0 4px;
				padding: 2px 10px;
			}
			h2 {
				margin: 0.35em 0 0.35em;
				font-size: 120%;
				color: #c00;
			}
			p {
				margin:0 0 .75em;
			}
		</style>
	</head>

	<body>
	
		<p>这种简单的,几乎没有任何样式的实验在<strong>IE5.5和IE6</strong>发现了旧bug,详情请参考<a href="/log/2004/01/30/ie_factor_example.html">这篇日志入口</a>. (IE5.0下是正常的.) 这个bug在连续模块中被一直恶化，直到文本和覆盖它的模块宽度相等为止！</p>
		
		<div id="sidebar">
		
			<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		</div>
	</body>
</html>

2.去掉边框之后的源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>文本向左偏移</title>
		<style type="text/css">
			#sidebar {
				width: 200px;
			}
			.module {
				margin: 0 0 15px;
				border: 0;
				padding: 2px 10px;
			}
			h2 {
				margin: 0.35em 0 0.35em;
				font-size: 120%;
				color: #c00;
			}
			p {
				margin:0 0 .75em;
			}
		</style>
	</head>

	<body>
	
		<p>这种简单的,几乎没有任何样式的实验在<strong>IE5.5和IE6</strong>发现了旧bug,详情请参考<a href="/log/2004/01/30/ie_factor_example.html">这篇日志入口</a>. (IE5.0下是正常的.) 这个bug在连续模块中被一直恶化，直到文本和覆盖它的模块宽度相等为止！</p>
		
		<div id="sidebar">
		
			<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		</div>
	</body>
</html>

3.修复bug之后的源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>文本向左偏移</title>
		<style type="text/css">
			#sidebar {
				width: 200px;
			}
			.module {
				margin: 0 0 15px;
				border: 4px solid pink;
				border-width: 0 4px;
				padding: 2px 10px;
				border-bottom: 1px solid #fff;
			}
			html>body .module {
				border-bottom-width: 0;
			}
			h2 {
				margin: 0.35em 0 0.35em;
				font-size: 120%;
				color: #c00;
			}
			p {
				margin:0 0 .75em;
			}
		</style>
	</head>

	<body>
	
		<p>这种简单的,几乎没有任何样式的实验在<strong>IE5.5和IE6</strong>发现了旧bug,详情请参考<a href="/log/2004/01/30/ie_factor_example.html">这篇日志入口</a>. (IE5.0下是正常的.) 这个bug在连续模块中被一直恶化，直到文本和覆盖它的模块宽度相等为止！</p>
		
		<div id="sidebar">
		
			<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
			</div>
		  
		
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		  
		  	<div class="module">
				<h2>模块标题</h2>
				<p>这是模块内容,在IE6下，你会发现除第一个模块正常外，其它每往下一个模块文字就住左偏移4个像素</p>
		  	</div>
		</div>
	</body>
</html>