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忽略框大小

回答

相关问题