IE CSS Bug系列:Text-Align Bug

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的 @nighca 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

影响的IE版本

这个bug影响IE7, IE6

表现

text-align属性影响块级元素

教程时间

2009.7.17 00:34:27

描述

这个bug也许能让人一下子想起什么,也可能让人毫无头绪,尤其当你不是刚刚写完这段代码。

你们可能会回忆起在版本6以下的IE中,因为auto值失效,使用text-align属性来使块级元素居中。这个方法可行的原因是text-align也出了问题,它不仅排布内联元素,而且影响块级元素。

MarginbugIE6中被修复了,但text-alignbug被遗忘,直到IE7中仍存在着。

Demo

HTML Code:

CSS Code:

我们的演示包括两个容器:#container1以及#container2,它们都被添加了text-align属性: #container1 { text-align: center; } #container2 { text-align: right; };它们内部都包含有纯文本(内联元素)及段落(块级元素)。

在遵循标准的浏览器中,一切都很正常,所有的文本都居中或是右对齐排布。如果你奇怪为什么段落(<p>元素)中的文本也受到影响,我得提醒一下,text-align属性是被继承了。

在所有现有版本的IE中,不难注意到,我们的段落本身被排布了;容器的text-align属性影响了块级元素,这是不应该的。

 

解决方案

以下是上述bug的解决方法(以类型排序)

解决方法 (干净的标记方法)

 

该方法的时间

2009.7.17 01:48:23

可修复的的版本

所有受该bug影响的版本

描述

我想不到有多少情况下你会将纯文本与块级元素相邻。因此,这个解决方法可能不仅可以修复Text-Alignbug,而且可以改善你的文档的语义结构。方法就是将纯文本,或者说是那些应该受text-align影响的内联元素,包装在合适的元素中。如果你对HTML还不是很熟悉,我建议你了解一下HTML元素。“HTML元素最佳实践手册”(HTML Elements Best Practice Sheet)也会派得上用场。

HTML Code:

CSS Code:

 

这里对于需要排布的文本,我们选择了<p>元素,我不就语义学争论,这里只是一个例子,<p>就可以了。

至于css代码,注意我们不再把text-align属性添加到#container1或是#container2上,而是将它移到我们添加的额外元素#fixed1#fixed2上。如果你不明白为什么#fixed1获得text-align: center,#fixed2获得text-align: right,我建议你研究下层叠(cascade)。这同样适用于width: auto的声明,我们需要它是因为已经有了p { width: 50%; }。

既然我们已经局限了text-align属性的作用范围,这个bug就不会再出现了,因为#fixed1#fixed2内部都不包含块级元素。

 

解决方法 (干净的方法)

该方法的时间

2009.7.17 01:29:24

可修复的的版本

所有受该bug影响的版本

描述

如果你不是非常肯定你使用了语义化的标签,你可能更希望了解“干净的标记方法”。

这个方法在你的主要样式表中添加两条规则(也许甚至是一条),适用于少有的需要文本节点与块级元素相邻,并且希望将text-align作用于文本的情形。我们看一下:

HTML Code:

CSS Code:

因为代码中有一些额外的内容看起来不怎么相关,我来解释一下这个修复方法的思路。修复这个bug的是float,就这么简单。是的,这个方法并不总是可行的,那种情况你可能希望尝试“干净的标记方法”。

除了p { float: left; } ,在demo其余的代码中可以注意到一段CSS代码被标上了float containg Microsoft,它们被使用是因为我们将子元素浮动了,而又需要将它们包含在父元素中。这个技巧被称为“float containment ”,并不属于这篇教程的范围。div { display: inline-block; } div { display: block; }是在IE下获取layout的方法,你的情况中它可能不适合、或是不需要。

收藏 评论

关于作者:nighca

(新浪微博:@nighca) 个人主页 · 我的文章 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部