前端

兼容性小结(1)

开学了。
我又忘记更博了。
啊~

这次记录了一些兼容性的东西：

RM8005: IE6 IE7 IE8(Q)

行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部。

W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落：
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.

由上面的描述可以得到以下结论：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。

此问题的触发条件:

同一个父容器内有多个行内元素；某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；浮动的子元素不都是位于非浮动的子元素之前。

解决方案

依具体情况可以使用三种方法：使用绝对定位模拟右浮动、使用 IE hack 专门在IE6 IE7 中设置负的上外边距、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

  • 使用绝对定位（position:absolute）模拟右浮动（float:right）。 但这样做的代价是必须为父容器 DIV 元素设置 ‘postion:relative’，这么做仍然会破坏原文档结构。所以我们并不推荐此方法。
  • 使用 IE hack 专门在IE6 IE7 中设置负的上外边距（margin-top:-XXXpx）。 既然此 Bug 为IE6 IE7 专有，则只需要在 IE6 IE7下为右浮动元素设置一个负的上外边距即可，其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星号 ‘‘。
    如     margin:-23px 5px 0 0，这样既可消除 IE6 IE7 中的 Bug，但是这么做是利用了浏览器的 Bug，并没有消除 Bug。在能有个更好的解决方法的时候，不推荐使用 CSS hack 来解决问题。
  • 调整SPAN元素的位置。 通过上面总结的 Bug 触发条件，我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug，即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部

RD8008

IE6 IE7(Q) IE8(Q) 绝对定位元素无法根据其四个方向的偏移量自动计算其尺寸

问题描述

IE6 及 IE7/8 的混杂模式下，非替换绝度定位元素当指定了 ‘left’ 及 ‘right’，而 ‘width’ 为默认值 “auto” 。此时浏览器无法正确地计算出 ‘width’ 的值，对于高度的计算也是如此。

解决方案

若能为非替换绝对定位元素设定固定的宽度及高度，则尽量不使用此方式自动计算绝对定位元素的 ‘width’ 及 ‘height’；若无法避免使用此方式，则可以通过判断浏览器，仅在 IE6 中使用 CSS Expression 控制绝对定位元素的宽度及高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style>
  #d {
    background-color: black;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    color: white;
    _width: expression(
      parseInt(this.offsetParent.currentStyle.width)
        - parseInt(this.currentStyle.left)
        - parseInt(this.currentStyle.right)
    );
    _height: expression(
      parseInt(this.offsetParent.currentStyle.height)
        - parseInt(this.currentStyle.top)
        - parseInt(this.currentStyle.bottom)
    );
  }
</style>
</head>
<body>
    <div style="background-color:gray;width:100px;height:100px;position:relative">
        <div id="d">test</div>
    </div>
</body>
</html>

RD8008: IE6 IE7(Q) IE8(Q) 绝对定位元素无法根据其四个方向的偏移量自动计算其尺寸

一个很好的网站：
W3Help
内容包括几乎所有的兼容性问题。以及各种浏览器标准，HTML/CSS规范。

IE8+兼容性小结

  • DOCTYPE
  • 使用meta标签调节浏览器的渲染方式
  • Media Query
  • 实现CSS3的某些特性
  • 识别HTML5元素
  • 关于max-width
  • 嵌套inline-block下padding元素重叠
  • last-child
  • background-size: cover

IE8+兼容经验小结

分享到