javascript - 页面徽标的浏览器兼容性问题

Question

我的页面顶部有一个徽标。它在 Opera 中看起来很棒。但是在 IE9 和 Chrome25 中这个部分是不可见的。我该如何解决这个问题？ http://jsbin.com/eqokec/4/

javascript

<style type="text/css">
        html,body {
            background: url("img/brick.jpg") repeat;
            height: 95%;
            font-size: 100%;
            margin-top: 2.5%;
        }

        .logo {
            min-height: 20% !important;
            background: url('img/logo.jpg') center no-repeat;
            background-size: auto 60%;
        }

        #container {
            background: #ffffff;
            width: 60%;
            margin: 0 auto;
            min-height: 100%;
            border: none;
            -moz-border-radius: 25;
            -webkit-border-radius: 25;
            border-radius: 25;
        }

        table {
            width: 98%;
            clear: none;
        }

        th {
            float: left;
        }

        span {
            color: #802420;
        }
        dl{
            display:inline-block;
            vertical-align:top;
            padding-right: 10px;
        }
        dt { float: left;  overflow: hidden; white-space: nowrap; }
        dt b,td b{color: #499249; text-decoration: underline}
        dd{ float: right;  overflow: hidden; text-indent: 3px;}
        /*dd:before{content: ".........................."}*/
        img { max-width: 100%; }
        img#street_view{
            width: 60%;
        }

        *{
            font-family: verdana arial sans-serif;
        }
        @media (max-width:639px){body{font-size: .5rem;margin: 0;padding: 0;}#container{width: 100%;}}
        @media (min-width: 640px) { body {font-size: .5rem;}#container{width: 50%} }
        @media (min-width:960px) { body {font-size: .7rem;}#container{width: 50%} }
        @media (min-width:1100px) { body {font-size:.9rem;}#container{width: 50%}}
    </style>

html

<section id="container">
<div class="logo">
    <h2><a href="/" title="Luigi's Pizzeria"></a></h2>
</div>
<div id="tabs">
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#locations">Locations</a></li>
</ul>

Answer 1

添加到类.logo display: block;和height: 200px;或类似的东西......

Answer 2

您可能需要更大的最小高度。

.logo {
    min-height: 150px;
}

Answer 3

修正

#container {
        min-height: 100%;
    }

到

#container {
        height: 100%;
    }