导航栏中的徽标在 Internet Explorer 中未正确居中答案

【问题标题】：Logo in navbar not properly centered in Internet Explorer导航栏中的徽标在 Internet Explorer 中未正确居中
【发布时间】：2021-05-20 19:47:00
【问题描述】：

我有一个导航器，其徽标使用 flexbox 居中，但在 IE 中未正确居中。有谁知道为什么会这样？

开发版本位于 etc.lukesmedia.com

谢谢！

【问题讨论】：

什么版本的ie？
所有版本的 IE。我最关心的是 IE 11。
“所有版本”就像在 IE6 中一样？您应该更具体地了解您需要支持哪些版本。话虽如此，IE11 今年即将结束生命，所以你可能不想再为它烦恼了。 that 说，这里有一个记录在案的 flexbox 错误列表：github.com/philipwalton/flexbugs

标签： html css internet-explorer

【解决方案1】：

我尝试使用 IE 11 和 Google Chrome 浏览器访问该网站。

我发现在 IE 11 浏览器中，当屏幕大于 700 像素时，徽标会出现在中心偏左一点的位置。

在 Chrome 浏览器中，当屏幕大于 700px 时，logo 出现在左侧，当屏幕小于 700px 时，logo 出现在中间。

所以看起来您希望在 IE 11 浏览器中获得类似的结果。

我尝试修改您的 CSS 代码以获得类似的结果。

下面是修改后的例子：

<!doctype html>
<html>
<head>
<title>demo</title>
<style>
html,
body {
    margin: 0px;
    padding: 0px;
    min-width: 300px;
}
.navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    z-index: 100;

    padding: 20px 0px;
    height: 80px;

    background-color: var(--super-light-grey, white);
    -webkit-filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.07));
            filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.07));
}

.navbar .content {
  
    width: 80%;
    height: 100%;
    font-family: var(--main-font, sans-serif);
    font-size: 1.3em;
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.navbar .content img {
    height: 100%;
}

@supports not (-ms-high-contrast: none) {
  .navbar .content {
    margin: auto;
    width: 80%;
    height: 100%;
    font-family: var(--main-font, sans-serif);
    font-size: 1.3em;
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    text-align: center;
   }
}

@media screen and (min-width: 700px) {
  .navbar .content {
        text-align: unset;
    }
  *::-ms-backdrop, .navbar .content {
        text-align: left;
    }
}

@media screen and (min-width: 800px) {
    .navbar {
        -webkit-box-pack: left;
        -webkit-justify-content: left;
        -moz-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
    }

}
</style>
</head>
<body>

  <HEADER class="navbar">
    <A class="content">
      <IMG alt="Education Transformation Centre Logo" src="logo.png"> 
    </A>         
  </HEADER>         
</body>
</html>

注意：建议你将以上代码保存到HTML文件中，修改logo的路径，尝试在IE 11浏览器中运行。

IE 11 中的输出：

在使用 IE 11 浏览器对其进行测试后，您可以尝试在您的原始代码中实现它以解决问题。此外，您可以尝试根据自己的需求修改代码。

【讨论】：

【解决方案2】：

在 main.css 文件的第 298 行，您使用的是text-align: unset，但 IE 似乎不喜欢这样。尝试更改为text-align: left，这应该适用于所有情况。

原创

@media screen and (min-width: 700px) {
    .navbar .content {
        text-align: unset;
    }
}

修改

@media screen and (min-width: 700px) {
    .navbar .content {
        text-align: left;
    }
}

【讨论】：

【解决方案3】：

IE 不喜欢margin:auto。

您可以使用IE-specific css rule 删除它：

@media screen and (min-width:0\0) {
   .navbar .content{
      margin:none 
   }

}

【讨论】：

【解决方案4】：

尝试使用其他浏览器，例如 chrome 或 firefox。 IE 不适合 HTML。一旦你在对象的 css 中使用 chrome 或 firefox，你应该有 text-align: center; 和 top: 50%;

【讨论】：

有些人还是需要支持IE。这无助于回答问题。