IE & CSS问题

分享于 

10分钟阅读

Web开发

  繁體 雙語

介绍

试图让基于css的网站在所有浏览器中看起来相同常常很困难。 不同的问题在于 IE 实现CSS命令不同于它的他标准,更符合标准的浏览器。 然而,在浏览器中看到的许多差异都是由同一个 IE CSS问题引起的。

1.页面元素是 IE 中的narrower

Perhaps IE 和CSS问题可能是浏览器对CSS框模型的misinterpretation misinterpretation,这可能导致页面元素在 IE 中被 narrower。 HTML元素基本上是一个框,它的宽度是它的margin。边框。padding 和内容区域的总宽度。 设想下面的CSS规则:

div{
 margin: 5em;padding: 4em;border: 1em solid green;width: 30em
}

这意味着每个 div50em 总宽度。 这个量由 30em 宽内容区域和左侧和右侧的4em padding。1em 边界和 5em ( 不可见) margin 组成。

然而,在 IE 中,内容的" width 中包含 borderpadding",而不是在。 因此,IE的内容宽度只有 20em ( 30em 个小于 5em paddingborder ),而 div的总 width 仅为 40个字节。

这个CSS模型出现在 IE5.x, 中,并且出现在IE6中,这取决于你如何在HTML代码中声明的ISO值。 有两种方法可以实现这里目的:

  • <?xml version="1.0" encoding="iso-8859-1"?>
  • <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

第一个命令放在HTML文档的第一行,第二个命令可以放在 <head> 文档的任何地方。 为了验证XHTML页面,必须使用以下命令之一。 W3C建议使用第一条命令作为第二个命令将在未来被淘汰。

但是,使用第一个命令,IE 6将不正确地呈现CSS框模型,就像在 5浏览器中一样。 要修复框模型问题,需要插入一个 CSS hack,以便向不同的浏览器 不同的宽度值。 你使用的CSS hack 将取决于你使用的ISO值,因这里不正确的IE 版本呈现框模型。

要只修复,请使用下列CSS命令:

div{
 margin: 5em;padding: 4em;border: 1em solid green;width/**/:/**/40em;width: 30em
}

要修复所有版本的,请使用下列CSS命令:

div{
 margin: 5em;padding: 4em;border: 1em solid green;width: 40em}html>bodydiv{
 width: 30em
}

( 参见本文,CSS &浏览器检测更多关于这些攻击的内容。)

2.非浏览器中的文本溢出

其他浏览器不同,IE 将扩展边框和 background 颜色,因此文本不会溢出它的包含元素。

假设一个div已经被分配了 class="box",并且有以下CSS命令分配给它:

.box{
 width: 40px;}

非浏览器浏览器将遵循 width: 40px CSS命令,因此框不会扩展以适应任何比 40px 长的文本。 不过,将 width 解释为 min-width,因此将扩展div以适应文本(。heightmin-height 同样适用)。

要确保文本不会出现在所有浏览器中的框中,除第一个以外,还需要使用以下CSS规则:

html>body. box{
 width: auto;min-width: 40px
}

如果命令的前面有,IE 将忽略这里CSS命令。 因此,这个CSS命令只适用于非浏览器浏览器。 第一个CSS规则 width: auto 取消了原来的width 规则。 第二个命令,min-width: 40px 将最小宽度分配给框,所以框将始终扩展以适应文本。

3。消失 background 图像

IE 有一个非常怪异的Bug,它喜欢让 background 图像消失。 当你在网页上向上和向下滚动经常会发生这种情况,你通常可以通过刷新页面来显示背景。

显然,你不希望你的网站访问者必须刷新页面才能完全查看 background 图像 ! 这个奇怪的解决方法是将CSS命令插入到包含映像的CSS规则中:

.foo{
 background: url(filename.jpg);position: relative}

有时候这个方法不能工作,所以给另外一个解决方案加一个 width 或者 height 给具有背景图像的元素。 你可能不希望分配 height 或者 width,因此解决方案是为 IE 分配 1%height。 由于 IE 将 height 解释为 min-height ( 请参见点 2 上面 ),因此这里CSS规则不会影响外观:

.foo{
 background: url(filename.jpg);height: 1%}html>body .foo{
 height: auto}

height: 1% CSS命令被 height: auto CSS命令取消。 IE 不理解 html>body,因此在第二个CSS规则前面插入这个函数,这个CSS规则将被 IE 忽略。

4.仅适用于 IE的宽度

每个HTML元素都是 block 元素或者 inline 元素。 block 元素的示例包括 <div><p><h1><form><li>。 inline 元素的示例包括 <span><a><label><strong><em>

inline 元素的特性之一是,你不能更改 inline 元素的宽度。 在理论上,以下CSS规则不能工作:

span{
 width: 100px
}

这个CSS规则将不起作用,除了在 IE 中,每个 span 现在都有一个 100pxwidth。 然而,在其他浏览器中,spanwidth 将仅仅是元素中包含的字符数的width。 将解决方案分为使span成为块级元素:

span{
 width: 100px;display: block}

在每个浏览器中都能使命令工作,但它也会使 span 在新的行开始。 要解决这个问题,可以向 spa<code> n </code/> 分配 float: left

5.Unstyled版网页在 IE 中出现

在 IE 中加载网站时,是否在第二个或者两个unstyled版本中显示一个5 的页面,然后在样式化的版本中? 如果是,你的网站可能会受到所谓的Unstyled内容的 Flash的困扰。

如果你使用的是 @import 指令( 比如。 <style type="text/css">@import"styles.css";</style> ) 调用你的CSS文件,这样可能发生在你的网站上的IE。 很奇怪,没有逻辑解释,但是这个问题显然需要修复。

对于这个不合逻辑问题,简单的收费解决方案是一个不合逻辑的解决方案- - 将链接或者脚本元素插入头:

  • <script type="text/javascript" src="scripts.js"></script>
  • <link rel="stylesheet" href="styles.css" type="text/css" media="print"/>

你插入( 或者即使你把两者都插入) 是不重要的。 如果你提供了打印样式表,使用链接元素引用( 如示例 上面 中所示),那么你将永远看不到FOUC现象。

6.固定宽度网页不位于窗口中央

得到一个固定 width 网站,不能让它集中在窗口中的IE? 也可以让它在 IE 中集中对齐,但不在任何其他浏览器中? 别担心,这不是你的错 ! 然而,通过CSS对内容进行集中对齐的正确方式实际上并不在 IE 中工作:

#container{
 width: 770px;margin: 0 auto
}

第二个命令 margin: 0 auto 基本上给我们包含元素左边和右边的自动边距,从而将包含元素定位在浏览器窗口的中心。

但是,IE 需要稍微不同的命令才能完成这项工作:

body{
 text-align: center}#container{
 width: 770px;margin: 0 auto;text-align: left}

这将在 IE 中集中地对齐容器。 为了防止文本集中对齐,我们在 containerdiv 中插入了 text-align: left

这篇文章是由 Trenton Moss编写的,他对网页可用性和易用性非常着迷。 公司是 Webcredible的创始人,一个网络可用性和辅助工具顾问,非常擅长可用性培训和可用性测试工具。


相关文章