关于bootstrap框架里media类的解析

发表于

写这篇文章源于工作项目前端UI要重构，而我选择参考bs框架来促进这个任务。同时，在创建媒体对象UI组件时，我发现bs框架的_media.scss类有几个属性令我不解。

bs完整的_media.scss类是这样的：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.media {
  // Proper spacing between instances of .media
  margin-top: 15px;
  &:first-child {
    margin-top: 0;
  }
}
.media,
.media-body {
  zoom: 1;
  overflow: hidden;
}
.media-body {
  width: 10000px;
}
.media-object {
  display: block;
  // Fix collapse in webkit from max-width: 100% and display: table-cell.
  &.img-thumbnail {
    max-width: none;
  }
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
// Reset margins on headings for tighter default spacing
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
// Media list variation
//
// Undo default ul/ol styles
.media-list {
  padding-left: 0;
  list-style: none;
}

最先令我疑惑的是

1
2
3
.media-body {
  width: 10000px;
}

为什么要设置这么大的宽度呢？意义在哪？百度无果，我寻问了前辈豪大(豪情)，得到线索stackoverflow。
又挑战我4级未过的英文水平了。。借助有道，我整理了一下提问和回答

提问

Why does media-body class in bootstrap have width 10,000px and media class have overflow hidden and zoom 1?

翻译：
在bootstrap框架里为什么media-body样式含有width:10000px和media样式含有overflow:hidden,zoom:1？

I have some question regarding the media classes in bootstrap.

  1. Why does .media-body class in bootstrap have width 10,000px? Why did they use display: table-cell not display: block?
  2. Why is overflow: hidden and zoom: 1used on .media class?
  3. Why doesn’t the div with .media-body actually take 10,000px width?
  4. What would happen if overflow: hidden and zoom: 1 are not used in .media class?

As for my effort, I removed overflow, zoom and 10,000px width and observed no difference.

翻译：
我有一些关于bs框架里media类的问题。
1. 为什么.media-body的宽为10000px,为什么是display:tall-cell而不是block?
2. 为什么.media用了zoom:1和overflow:hideen？
3. 为什么实际上div的宽度不是.media-body设置的10000px？
4. 如果不设置over-flow:hidden和zoom:1将会发生什么？
经过实践后，我删除over-flow:hidden和zoom:1和width:10000px观察到并没有什么改变。
大致是这个意思QAQ有没有英语好点的指导指导……

回答

I have found some comments in the collection “Responsive Bootstrap”:

  1. Create new block formatting context in modern browsers
  2. Avoid shrink-wrap behaviour of table-cell
  3. Override for IE6/7
  4. Create new block formatting context in IE6/7
    Alternatively, use ‘overflow:hidden’ if clipping is OK
    1
    2
    3
    4
    5
    6
    7
    display: table-cell; /* 1 */
    width: 10000px; /* 2 */
    @include old-ie() {
        *width: auto; /* 3 */
        *zoom: 1; /* 4 */
    }
    >

zoom is a hack for IE6 and IE7. All browsers ignore attributes that begin with an asterisk. Only IE7 and below takes them into account.

翻译：
我收集到一些关于“bs响应”的回复：
1. display: table-cell;在新版本浏览器可触发BFC（块级格式化上下文），如果不知道什么是BFC，可以百度或者看我的前一篇文章overflow:hidden
2. width:10000px能避免设置table-cell的盒子变型 (因为在IE6/7不支持table-cell属性，且浏览器对table-cell属性展现不一)
3. width:auto在IE6/7中形同于重写/覆盖。（*width是IE8下的hack技术）
4. zoom:1能在IE6/7中触发BFC
使用overflow:hidden能恰到好处的隐藏溢出样式。

zoom:1 是IE6/7的hack技巧，所有浏览器都会忽略这个属性除了IE6/7.

总结

看来为了善用table-cell，Twitter大牛们又给我上了一课。
这里为了求证以上答案的真实性，我去拜访了张鑫旭前辈的博客，了解table-cell。
在之前，我对table-cell属性仅仅停留在表单元形式展现的印象里，通俗理解，设置display:table-cell的盒子形式上会变成<table>，所以其子元素都会变成表单元，形同于<td>或<tr>。但由于IE6/7的不支持，所以设置其父元素需要配合overflow:hidden,zoom:1用于避免盒子塌陷，和触发BFC。而*width:10000px多余的宽度也恰到好处的被父元素隐藏。
所以table-cell有很高的使用价值，如：

  • 大小不固定元素的垂直居中，在对图片垂直居中时，img标签应被<a>标签包裹。(父table-cell + 父子vertical-align + 子inline-block)
  • 两栏自适应布局(兄弟flout + 兄弟table-cell)
  • 等高布局(父table-row + 子table-cell)
  • 列表布局(同上 + 子width)

(父：指父元素，子：指子元素，兄弟：相邻元素)

超实用有木有，日常写demo都遇的上。
系统提示：恭喜玩家uhey技能提升10个点！