首页 > 代码库 > CSS盒子模型和IE浏览器

CSS盒子模型和IE浏览器

CSS盒模型图解

下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。

 

 

  在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上。

W3C盒模型

首先看一下《 the W3C box model》,这里所写出的标准,如果没问题的话,是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。 在W3C盒模型中,一个块级元素的总宽度按照如下方程式计算:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

对于高度也使用同样的计算方法。

IE盒模型 

IE盒模型的计算方式:填充(padding)和边框(border) 不被包括在计算的范围内。

总宽度 = margin-left + width + margin-right

这就意味着元素一旦拥有横向的填充和/或边框,实际的内容区域(content area)就要扩大来创造出他们占据的空间。

关于IE的版本

   IE5.5及更早的版本使用的是IE盒模型。IE6及更新的版本在标准兼容模式下使用的是W3C标准盒模型。只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作。此盒模型问题只会出现在IE5.5及其更早的版本中。

解决问题

现在确定了IE6及后续版本都会遵循标准兼容模式, 唯一要关注的事情就是如何令IE5.5及更早版本中的网页和其在现代的浏览器中的呈现效果是一致的。以下列出了4种方法。

  1. 避免导致这个问题的情景
  2. 插入额外的标记
  3. 使用条件注释判断语句
  4. 使用CSS Hacks 
1. 避免导致这个问题的情景

避免为一个元素同时设置width和padding值或者width和border值,再或者width同时和它们两个值。者确保了所有的浏览器都会一样的去计算元素的总宽度,而不用考虑它们使用哪种盒模型方式。 

  2. 插入额外的标记

拿一个例子来说明,下面的HTML用来定义一个新闻列表:

<div id="news">
    <h2>News</h2>
    <ul>
        <li>
            <h3>News article 1</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <h3>News article 2</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>
</div>

为了得到一个250像素宽的列表,且应用1像素的边框和10像素的填充,会用到这样的CSS:

#news {
    padding
: 10px;
    border
: 1px solid #000;
    width
: 228px;
}

  在符合标准的浏览器中,总宽度为250px(1px border-left + 10px padding-left + 228px width + 10px padding-right + 1px border-right)。在IE5.5及更早的版本中,总宽度只是228px,因为它并未计算边框和填充的值。

那么如何避免这个问题呢? 让我假设新闻列表在另一个容器里,比如它在侧边栏(sidebar)里:

<div id="sidebar">
    <div id="news">
        ...
    </div>
</div>

  如果是这样,可以为父容器(sidebar)设置宽度来达到效果:

#sidebar {width:250px}
#news 
{
  padding
:10px;
  border
:1px solid;
}

如果情况不允许,可是使用插入额外标记这个方法。还是上述的例子,在#news里面插入一个标记:

<div id="news">
    <div>
        <h2>News</h2>
        <ul>
            ...
        </ul>
    </div>
</div>

使用如下CSS:

#news {width:250px}
#news div 
{
  padding
:10px;
  border
:1px solid;
}

3. 使用条件注释判断语句

如果没有合适的父容器来控制宽度,也不能通过添加标记来解决问题,那针对IE5.*/Win我们需要设置一个不同的width值了。

最安全的方式就是使用条件注释判断语句,这些内容只能在IE/Win中被解析,下面的代码只有在IE6以下的版本中被执行:

<!--[if lt IE 6]>
    <style type="text/css">
        #news 
{width: 250px;}
    </style> 
<![endif]--> 

如果采用这种方式,建议将全部的针对IE5.*/Win的代码全部转移到一个单独的CSS文件中来加载它:

<!--[if lt IE 6>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/ie5.css">
<![endif]-->

4.使用CSS Hacks

#news {
    padding
: 10px;
    border
: 1px solid;
    width
: 250px;
    width
:228px;
} 

  所有的浏览器都会看到并理解"width:250px",但IE5.*/Win不会读取下面的一行,width:228px,但这行会被其它浏览器解析。所以最后,IE5.*/Win得到width值是250px,其它浏览器得到的width值是228px。这样保证在全部的浏览器中新闻列表的总宽度一致。

 

转载自:http://www.osmn00.com/translation/213.html 

CSS盒子模型和IE浏览器