內聯 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