IE8忽略框大小

我有問題讓IE8跟隨框大小。在我的標題中，我將我的徽標設置爲最大高度：100％，並帶有一些填充。應該發生的是，圖像的大小最終應該是標題高度的100％，而不是填充量。這在現代瀏覽器中完美運行。但是，在IE8中，圖像最終成爲標題高度的100％，然後添加了paddding，使其從標題邊緣運行。任何想法爲什麼發生這種情況？我知道IE8應該支持盒子大小。IE8忽略框大小

CSS：

#logoimg { 
    max-height:55px; 
    padding:4px 10px 4px 0; 
    float:left; 
    border-right:1px solid #ad1d00; 
    box-sizing:border-box; 
} 
#navigationcontainer { 
    width:100%; 
    background:#f1f1f1; 
    -moz-box-shadow:0px 1px 3px 3px #dfdfdf; 
    -webkit-box-shadow:0px 1px 3px 3px #dfdfdf; 
    box-shadow:0px 1px 3px 3px #dfdfdf; 
    box-sizing:border-box; 
} 
#navigationtopbar { 
    width:100%; 
    background:#ea2700; 
    height:55px; 
    box-sizing:border-box; 
} 
#navigationtopbar ul { 
    float:left; 
    list-style-type:none; 
    padding:0; 
} 
#navigationtopbar ul li { float:left; } 
#navigationtopbar ul li a { 
    padding:0 10px 0 10px; 
    line-height:55px; 
    display:block; 
    color:#ffffff; 
    border-right:1px solid #ad1d00; 
    border-left:1px solid #ef5f42; 
} 
#navigationtopbar ul li a:hover { background-color:#ef5f42; } 
.chart { 
    width:100%; 
    padding:0; 
    margin:0; 
}

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="latin1/iso-8859-1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 
    </head> 
    <body> 
<nav id="navigationcontainer" role="navigation"> 
    <div id="navigationtopbar"> 
     <div class="container-fluid"> 
      <a title="Fast Food Nutrition" href="/"><img alt="Fast Food Nutrition" id="logoimg" src="/images/logo.png"></a> 
      <ul> 
        <li> 
         <a title="Fast Food Restaurants" href="/fast-food-restaurants.php">Restaurants</a> 
        </li> 
        <li> 
         <a title="Fast Food Nutrition Nutrition Calculator" href="/fast-food-meal-calculator.php">Nutrition Calculator</a> 
        </li> 
        <li> 
         <a title="Fast Food Nutrition Blog" href="/blog/">Blog</a> 
        </li> 
        <li> 
         <a title="Nutrition Glossary" href="/glossary/">Glossary</a> 
        </li> 
        <li> 
         <a title="Fast Food Nutrition Lesson Plans" href="/lesson-plans.php">Teachers</a> 
        </li> 
        <li> 
         <a title="About FastFoodNutrition.org" href="/about-us.php">About</a> 
        </li> 
        <li class="hidden-sm visible-xs"> 
         <a title="Search FastFoodNutrition.org" href="/gsearch.php">Search</a> 
        </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
    </body> 
</html>

來源

2014-10-06 user2874270

感謝您的建議，但我實際上已包含html5shiv。我試圖剪掉相關的代碼，而不是把所有東西都放在這裏，而我錯過了包括這些。 – user2874270 2014-10-06 21:32:21

你#logoimg有max-height:55px。

如果使用最小/最大寬度/高度，IE 8將忽略box-sizing: border-box。來源：http://caniuse.com/#search=box-sizing>已知問題＃4

來源

2014-10-06 21:57:11 JBiserkov

謝謝！我將它改爲「高度」，並且完美運作。 – user2874270 2014-10-06 23:35:02

IE8忽略框大小

回答

相關問題