Html 导航栏中的徽标在Internet Explorer中未正确居中_Html_Css_Internet Explorer

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

html css internet-explorer

Html 导航栏中的徽标在Internet Explorer中未正确居中,html,css,internet-explorer,Html,Css,Internet Explorer,我有一个使用flexbox居中的navber标志，但在IE中它没有正确居中。有人知道为什么会这样吗开发版本位于etc.lukesmedia.com 谢谢尝试使用不同的浏览器，如chrome或firefox。IE不适合HTML。一旦你在对象的css中使用chrome或firefox，你应该有text align:center和顶部：50%IE不喜欢边距：自动您可以使用删除它： @media screen and (min-width:0\0) { .navbar .content{

我有一个使用flexbox居中的navber标志，但在IE中它没有正确居中。有人知道为什么会这样吗

开发版本位于etc.lukesmedia.com

谢谢

尝试使用不同的浏览器，如chrome或firefox。IE不适合HTML。一旦你在对象的css中使用chrome或firefox，你应该有

text align:center和<代码>顶部：50%
IE不喜欢边距：自动
您可以使用删除它：
@media screen and (min-width:0\0) {
   .navbar .content{
      margin:none 
   }

}

在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;
    }
}

我尝试使用IE11和谷歌浏览器访问这个网站
我发现在IE11浏览器中，当屏幕大于700px时，徽标会从中间偏左一点
在Chrome浏览器中，当屏幕大于700px时，徽标显示在左侧，当屏幕小于700px时，徽标显示在中间
因此，看起来您希望在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，
身体{
边际：0px；
填充：0px；
最小宽度：300px；
}
navbar先生{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
z指数：100；
填充：20px 0px；
高度：80px；
背景色：var（--超浅灰色，白色）；
-webkit过滤器：投阴影（10px 10px 50px rgba（0,0,0,0.07））；
滤镜：投影（10px 10px 50px rgba（0,0,0,0.07））；
}
.navbar.content{
宽度：80%；
身高：100%；
字体系列：var（--主字体，无衬线）；
字体大小：1.3em；
字号：800；
文字装饰：无；
颜色：继承；
文本对齐：居中；
}
.navbar.content img{
身高：100%；
}
@不支持（-ms高对比度：无）{
.navbar.content{
保证金：自动；
宽度：80%；
身高：100%；
字体系列：var（--主字体，无衬线）；
字体大小：1.3em；
字号：800；
文字装饰：无；
颜色：继承；
文本对齐：居中；
}
}
@媒体屏幕和屏幕（最小宽度：700px）{
.navbar.content{
文本对齐：取消设置；
}
*：-ms background、.navbar.content{
文本对齐：左对齐；
}
}
@媒体屏幕和屏幕（最小宽度：800px）{
navbar先生{
-webkit盒式包装：左侧；
-webkit内容：左；
-moz盒式包装：左；
-ms flex pack：左；
对正内容：左；
}
}

在使用IE 11浏览器进行测试后，您可以尝试在原始代码中实现它以解决问题。此外，您可以尝试根据自己的要求修改代码。
什么版本的ie？ie的所有版本。我最关心的是ie 11。IE6中的“所有版本”是什么？您应该更具体地说明需要支持哪些版本。这就是说，IE11将在今年寿终正寝，所以你可能不想再为它烦恼了。话虽如此，这里有一个记录在案的flexbox bug列表：有些人仍然需要支持IE。这无助于回答这个问题。