我有下面的HTML，带有简单的标题和带有内联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>
镀铬外观如预期出现-即背景颜色为#a3a314；和标志在右边，但IE没有。
但IE看起来不一样。
如何在IE中获得与chrome相同的视图？(右端有背景色和徽标(
您可以尝试为导航栏添加前缀，如下所示：
.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;
}
使用以下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;
}
试试这个
.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;
}