浏览器bug和修复2

　　拥有布局

　　Window IE上的bug要比其余浏览器多，缘由之一是，IE的显示引擎使用一个称为布局(layout)的内部概念。由于布局是专门针对显示引擎内部工做方式的概念，因此通常状况下不须要了解它，可是，布局问题是许多IE/Win显示bug的根源，因此理解这个概念以及它如何影响CSS是有帮助的。

　什么是布局

　　Windows上的IE使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责自己及其子元素的尺寸和定位。若是一个元素没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素来控制。

　　IE显示引擎利用布局概念减小它的处理开销，在理想状况下，全部元素都控制本身的尺寸和定位。可是，这会在IE中致使很大的性能问题。所以，IE/Win开发团队决定只将布局应用于那些实际须要它的元素，这样就能够充分的减小布局开销。

 

---

　在默认状况下拥有布局的元素：

• body
• 标准模式的html
• table
• tr、td
• img
• hr
• input、select、textarea、button
• iframe、embed、object、applet
• marquee

---

　　布局概念是IE上特有的，并且它不是CSS属性。尽管某些CSS属性会使元素拥有布局，可是在CSS中没法显示的设置布局。可使用Javascript函数hasLayout查看一个元素是否拥有布局。若是拥有布局，这个函数就返回true，不然返回false。hasLayout是一个只读属性，因此没法使用Javascript进行设置。

---

　　设置如下CSS属性会自动的使元素拥有布局：

• position: absolute
• float:left或right
• display: inline-block
• width: 任何值
• height: 任何值
• zoom: 任何值（Microsoft属性----不能经过检查）
• writing-mode: tb-r1 （Microsoft属性----不能经过检查）

---

　布局有什么效果

　　布局时许多IE/Win显示bug的根源。例如，一个文本段落靠着一个浮动元素，那么指望这个文本环绕这个元素。可是在IE6和更低版本中，若是给段落设置了高度，那么这个段落就拥有了布局，因而它就被限制为矩形，阻止了文本环绕浮动元素，这会致使浮动布局的各类问题。

　　另外一个问题涉及拥有布局元素如何肯定本身的尺寸。若是元素的内容变得比元素自己大，那么指望内流到元素外，可是，在IE6和更低版本中，拥有布局的元素会扩展自身的尺寸以适应内容。因此，在IE中width更像min-width，尤为是当浮动框的内容迫使框的宽度增长时，框的宽度对于可用宽度来讲太大了，这个框就会降低到其余框的下面。

 

---

 

　　其余问题还包括：

• 拥有布局的元素不进行收缩
• 布局元素对浮动进行自动清理
• 相对定位元素不得到布局
• 在拥有布局的元素之间空白边不叠加
• 在不拥有布局的块级连接上，单击区域只覆盖文本

 

---

 

 　常见的bug和修复方法　

　　CSS开发人员最重要的技能之一是发现常见浏览器bug的能力。经过了解致使这些bug的各类元素，能够在它们形成问题以前发现而且修复它们。

　双空白边浮动bug

　　最多见且最容易发现的bug之一是IE6和更低版本中的双空白边浮动bug。顾名思义，这个Windows bug使任何浮动元素上的空白边加倍。

 　　这个bug很容易修复，将元素的display属性设置为inline就能够了。由于元素是浮动的，因此将display设置为inline实际上不会影响显示方式。可是，这彷佛会阻止IE 6和更低版本将全部的空白边加倍。这是一个很是容易发现和修复的bug：每当对具备对平空白边的元素进行浮动时，都应该很天然的将display属性设置为inline。

　3像素文本偏移bug

　　另外一个很是常见的IE5-6/Win bug是3像素文本偏移bug：当文本与一个浮动元素相邻时，这个bug就会表现出来。例如，假设将一个元素向左浮动，而且不但愿相邻的段落文本围绕浮动元素，你可能会在段落应用左空白边，其宽度等于浮动元素的宽度：

.myFloat {
float: left;
width: 200px;
}

p {
margin-left: 200px;
}

　　若是这么作，在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙：

 　　修复这个bug要左右开弓，首先，给包含文本的元素设置任意的高度，这会迫使元素拥有布局，由于在IE6和更低版本上height的效果等同于min-height，因此设置一个小的高度不会影响元素在这些浏览器里的实际尺寸，可是，会影响其余浏览器，因此要针对Windows上的IE6和更低版本才使用这个规则：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
}
/*End hide from IE5-mac */

　　不幸的是，这么作会致使另一个问题，拥有布局的元素会被限制为矩形，而且出如今浮动元素的旁边而不是下面，添加200像素的空白边实际上会在IE5/6中使浮动元素和段落之间产生200像素的间隙。为了不这个间隙，须要从新把空白边设置为零：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}
/*End hide from IE5-mac */

　　这样，文本偏移被修复了，可是如今另一个3像素的间隙出现了，这一次是在浮动元素上。为了去掉这个间隙，须要在浮动元素上设置一个负值的3像素右空白边：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}

* html .myFloat {
margin-right: -3px;
}
/*End hide from IE5-mac */

　　若是浮动元素是除了图像以外的其余元素，那么这个问题已经被修复了。可是，若是浮动元素是图像，那么还有最后一个问题须要解决。IE 5/Win在图像的左右都添加了3像素的间隙，而IE6不改变图像的空白边。所以，须要一个招数只在IE5/Win上去掉3像素的间隙：

/* Hide from IE5-mac, only IE-Win see this \*/
* html p {
height: 1%;
margin-left: 0;
}

* html .myFloat {
margin: 0  -3px;
ma\rgin: 0;
}
/*End hide from IE5-mac */

　　这会解决问题，可是采用的方式复杂并且难看，所以，若是可能的话，最好将这些规则分别放进单独的浏览器特定的样式表中。若是这样作，在IE5的样式以下：

p {
height: 1%;
margin-left: 0;
}

img.myFloat {
margin: 0 -3px;
}

　　用于IE6的样式以下：

p {
height: 1%;
margin-left: 0;
}

img.myFloat {
margin: 0;
}