Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does media-body class in bootstrap have width 10,000px and media class have overflow hidden and 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.

like image 704
user31782 Avatar asked May 12 '16 06:05

user31782


1 Answers

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
*/
display: table-cell; /* 1 */
width: 10000px; /* 2 */
@include old-ie() {
    *width: auto; /* 3 */
    *zoom: 1; /* 4 */
}

UPD

*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.

like image 158
Gleb Kemarsky Avatar answered Oct 21 '22 04:10

Gleb Kemarsky