Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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.

alt text

Now that's what I get after reloading the page, with F5:

alt text

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
428 views
Welcome To Ask or Share your Answers For Others

1 Answer

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...