java selenium 操作浏览器实例分享( 二 ) _云知道

haslayout 问题的调试与解决
当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout 。而一旦问题消失，那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的 width/height 属性，其次再考虑其他属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack) ，即设定这个元素的高度为 1% (height:1%;) 。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。
对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;) 。
haslayout 问题引起的常见 bug
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;
IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;
IE6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;
这里列出触发 hasLayout 元素的一些效果
1.阻止外边距折叠
两个相连的 div 在垂直上的外边距会发生叠加，而触发 hasLayout 的元素之间则不会有这种情况发生，如下图：

上图的例子中，三个 div 各包含一个 p 元素，三个 div 及其包含的 p 元素都有顶部和底部的外边距，但只有第三个 div 的边距没有与它的子元素 p 的外边距折叠。这是因为第三个 div 使用 zoom: 1 触发了 hasLayout ，阻止了它与它的子元素的外边距折叠。
另外，例子中也使用了 overflow: hidden 触发元素的 BFC ，这利用了 BFC 阻止外边距折叠的特性达到元素在 IE 与现代浏览器下的表现统一。
2.可以包含浮动的子元素，即计算高度时包括其浮动子元素
效果如图：

上图的例子中，有两个 div ，它们各包含一个设置了浮动的 p 元素，但第一个 div 实际被浏览器判断为没有高度和宽度，即高度为 0 ，上下边框重叠在一起。而第二个 div 使用 zoom: 1 触发了 hasLayout ，可以包含浮动元素，因此能正确表现出高度，其边框位置也正常了。
本例子中也使用了 overflow: hidden 触发 BFC ，跟上例相似，这利用了 BFC 可以包含浮动子元素的特性达到元素在 IE 与现代浏览器下的表现统一。
3.背景图像显示问题
元素背景图不能正确显示是网页代码重构中最常见的问题之一了，在 IE 7 及以下的 IE 版本中，没有设置高度、宽度的元素往往不能显示出背景图(背景色则显示正常) ，这实际上与 hasLayout 有关。实际的情况是，没有触发 hasLayout 的元素不能显示背景图，上面有说过，触发 hasLayout 也就是使到元素拥有布局，换句话说，拥有布局的元素才能正确显示背景图。如下图：

上图两个 div 都设置了背景图，但只有使用 zoom: 1 触发了 hasLayout 的第二个 div 才能正确显示背景图。
本例子中没有触发元素的 BFC ，这是因为在现代浏览器中，元素本身并没有背景图显示问题。
【java selenium 操作浏览器实例分享】以上本文讲述text-align:justify实现文本两端对齐兼容IE ，希望大家喜欢。