可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 :-)

回答1:

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

in the header, which works great.

More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

回答2:

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.