导航栏中的徽标在 Internet Explorer 中未正确居中
Posted
技术标签:
【中文标题】导航栏中的徽标在 Internet Explorer 中未正确居中【英文标题】：Logo in navbar not properly centered in 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 【参考方案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 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。这无助于回答问题。以上是关于导航栏中的徽标在 Internet Explorer 中未正确居中的主要内容，如果未能解决你的问题，请参考以下文章