與頁面徽標的瀏覽器兼容性問題

我在頁面頂部有一個徽標。在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>

來源

2013-03-14 Antarr Byrd

把一個絕對圖像路徑在您的演示。當圖片無法加載時，很難排除故障。 – isherwood 2013-03-14 15:19:05

@isherwood我做了這個改變。上面的鏈接已被編輯爲最新版本。謝謝 – 2013-03-14 15:24:08

'.logo {0} {0} {＃} min-height：20％！important;'應該是'#container .logo {0}最小高度：20％;'＃容器'聲明應該超過'#container .logo' 。 http://jsbin.com/eqokec/7/edit – 2013-03-14 15:50:22

添加到類.logodisplay: block;和height: 200px;或類似的東西...

來源

2013-03-14 15:31:45 Kamil

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

.logo { 
    min-height: 150px; 
}

來源

2013-03-14 15:17:36 isherwood

修改

#container { 
     min-height: 100%; 
    }

要

#container { 
     height: 100%; 
    }

來源

2013-03-14 15:37:18

與頁面徽標的瀏覽器兼容性問題

回答

相關問題