{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 迷人小祖宗 的问题《Internet Explorer 8 bug with display: table》','https://www.manongdao.com/q-215517.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have the weirdest bug ever... I'm experimenting with display: table, and my proof of concept works on the very first try after opening a new process, but any subsequent reloading of the page breaks the design. Here is the simple HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
</div>
</body>
</html>
And here is the expected result, this is what I get after loading the first time.
Now that's what I get after reloading the page, with F5:
It's insane!!!
Can someone please try it and let me know how it comes out for them? Thank you. I hope I will not have killed myself by the time I read the solution :-)
It turns out that, as suggested by some, IE's compatibility mode was triggered somehow.
I found out that it's because I'm running the page on an Intranet, and by default compatibility mode is enabled for Intranet websites.
This can be disabled by going to Tools > Compatibility View Settings and unchecking the Display intranet sites in Compatibility View box. Of course this is not something you necessarily want to ask all your users to do, so it was suggested to me to add
in the header, which works great.
More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
The problem when the browser is in compatibility view. (as suggested by taylorjes)
When the page is displayed in normal view, the cells are horizontal. When displayed in compatibility view, the cells are vertical.
As I said in my comment, I would highly discourage the display:(table/table-row/table-cell) CSS property. It is not well supported and is bound to have quirks.
Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout.