内联 CSS 用于 Header 和徽标在 Chrome 和 IE 中看起来不同

Question

我有下面的 HTML 和简单的 header 和带有内联 CSS 的徽标。 我想在 chrome 和 IE 浏览器中获得相同的外观。

<html>
<title>Workflow Report </title>

<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      text-align: left;
      padding: 8px;
    }

    thead input {
      width: 100%;
      padding: 3px;
      box-sizing: border-box;
    }

    /* Header and Logo
-------------------------------------------------------------- */
    .navbar {

      margin: auto;
      background: #a3a3a314;
      color: #285a8b;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-logo {
      padding: 20px;
      flex: 1 0 0;
      text-align: right;
    }

    #logo {
      max-width: 120px;
      width: 100%;
      height: auto;
    }

    /* Inline bulleted lists
-------------------------------------------------------------- */

    hr.style14 {
      border: 0;
      height: 1px;
      background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }
  </style>
</head>
<SCRIPT>

</SCRIPT>

<body>
  <div id="content">

    <nav class="navbar">
      <div>
        <h3 style="font-family:arial black;color: #285a8b;">Report</h3>
      </div>
      <div class="main-logo"><a href="#" class="navbar-brand"><img class="logo" id="logo" src="https://seeklogo.com/images/T/tenaga-nasional-logo-A5D1C313B0-seeklogo.com.png" alt="SC2 Logo"></a></div>

    </nav>

    <hr class="style14">

  </div>
</body>

chrome 外观按预期显示 - 即背景颜色为 #a3a3a314； 和右边的标志，但 IE 没有。

但 IE 看起来不同。

如何在 IE 中获得与 chrome 相同的视图？ （右端有背景颜色和标志）

Answer 1

您可以尝试为导航栏添加代码前缀，如下所示：

.navbar {
      margin: auto;
      background: #a3a3a314;
      color: #285a8b;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

Answer 2

使用下面的 css 实现。

    /* Header and Logo
-------------------------------------------------------------- */
    .navbar {
      margin: auto;
      background: rgb(240,240,240);
      color: #285a8b;
      display: flex;
    }

    .main-logo {
      padding: 20px;
      flex: 800;
      text-align: right;
      float: right;

    }

    #logo {
      max-width: 120px;
      width: 100%;
      height: auto;
    }

Answer 3

尝试这个

.navbar {
  margin: auto;
  background: #f8f8f8;
  color: #285a8b;
  display: flex;
}

.main-logo {
  padding: 20px;
  flex: 800;
  text-align: right;
  float: right;

}

#logo {
  max-width: 120px;
  width: 100%;
  height: auto;
}

内联 CSS 用于 Header 和徽标在 Chrome 和 IE 中看起来不同

问题描述

3 个解决方案

解决方案1
0 2019-11-01 10:01:25

解决方案2
0 2019-11-02 02:44:51

解决方案3
0 2019-11-02 02:54:29

内联 CSS 用于 Header 和徽标在 Chrome 和 IE 中看起来不同

问题描述

3 个解决方案

解决方案1 0 2019-11-01 10:01:25

解决方案2 0 2019-11-02 02:44:51

解决方案3 0 2019-11-02 02:54:29

解决方案1
0 2019-11-01 10:01:25

解决方案2
0 2019-11-02 02:44:51

解决方案3
0 2019-11-02 02:54:29