[英]Inline CSS for Header and Logo Looks different in Chrome and IE
I have the below HTML with simple header and logo with inline CSS.我有下面的 HTML 和简单的 header 和带有内联 CSS 的徽标。 I would like to get the same look in chrome and IE browser.我想在 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 look appears as expected - ie with background color as #a3a3a314; chrome 外观按预期显示 - 即背景颜色为 #a3a3a314; and logo on the right but IE doesn't.和右边的标志,但 IE 没有。
But IE looks different.但 IE 看起来不同。
How can I get the same view as like chrome in IE?如何在 IE 中获得与 chrome 相同的视图? (with background color and logo at the right end ) (右端有背景颜色和标志)
You can try prefixing you code for navbar like this:您可以尝试为导航栏添加代码前缀,如下所示:
.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;
}
Achieved using below css.使用下面的 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;
}
Try this尝试这个
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.