Question

我有以下页面标题：

    <header id="header" class="Anonymous" data-role="header">
        <div class="content">
            <div id="logo"><a href="index.php"><img src="img/logos/logo-ddf.png" alt="Dorset Dub Fest"></a></div>
            <div class="outer-nav">
                <ul class="nav links">
                    <li class="packed"><a href="booking.php" class="active link-secondary">Book Tickets!</a></li>
                </ul>
                <ul class="nav links desktop-links">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="news.php">News</a></li>
                    <li><a href="event.php">What's On</a></li>
                    <li><a href="sponsors.php">Sponsors</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Trade</a>
                        <ul class="dropdown-menu trade-dropdown" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="trade-info.php">2014 Trader Information</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="docs/Dubfest%20Traders.pdf">Trader Application</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="traders.php">Traders List</a></li>
                        </ul>
                    </li>
                    <li><a href="find-us.php">Find Us</a></li>
                </ul>
            </div>
        </div>
    </header>

和我的CSS：

    #header {
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
    font-size: 15px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.08);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.08);
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

@media screen and (min-width:960px) {
    #header {
        height: 70px;
        padding: 0;
    }
}

#header #logo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    width: 102px;
    margin: auto;
    float: left;
}

#header #logo img {
    height: 100%;
    width: auto;
}

@media screen and (min-width:960px) {
    #header #logo {
        margin: 20px 0 16px;
        float: left;
        height: 35px;
        width: auto;
    }

    #header #logo img {
        width: 270px;
        height: 130px;
    }
}

#header .content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1170px;
    *zoom: 1;
}

#header .content:before, #header .content:after {
    display: table;
    content: "";
    line-height: 0;
}

#header .content:after {
    clear: both;
}

以下是该网站的链接：已删除

现在问题如下：

在IE10 / Chrome / Firefox上显示： enter image description here 在IE7上显示：但是在IE8上它会显示：

徽标消失了，我不知道为什么。我正在使用respond.js和html5shiv来阅读我的html和css媒体查询。

任何想法SO？

Answer 1

#logo {
    width: auto;
}

它使IE8中的徽标消失。可能它没有显示链接徽标的尺寸。

也许添加：

#logo a {
    display: block;
}

最好使用max-width来响应添加到img标签：

#logo img {
    width: auto;
    max-width: 100%;
    height: auto;
}

Answer 2

感谢@Sigma。

答案是将width:auto;添加到#logo img，如下所示：

@media screen and (min-width:960px) {
    #header #logo {
        margin: 20px 0 16px;
        float: left;
        height: 35px;
        width: auto;
    }

    #header #logo img {
        width: auto;
        height: 130px;
    }
}

Respond.js隐藏徽标图像ie8

2 个答案: