我在让 IE8 遵循框大小调整时遇到问题。在我的标题中，我将 Logo 设置为 max-height: 100%，并带有一些填充。应该发生的是图像的大小最终应为标题高度的 100%，减去填充量。这在现代浏览器中完美运行。然而在 IE8 中，图像最终达到页眉高度的 100%，然后添加填充，使其超出页眉边缘。知道为什么会发生这种情况吗？我知道 IE8 应该支持 box-sizing。
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>
最佳答案
您的#logoimg具有max-height:55px。
如果使用 min/max-width/height，IE 8 会忽略 box-sizing: border-box。
来源:http://caniuse.com/#search=box-sizing > 已知问题#4
关于css - IE8 忽略框大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26224238/