Css 我的divs赢了'；不要排队-

如果我为chrome设置了样式，它可以工作，但在Firefox中不行，反之亦然——目前我已经为Firefox设置了样式。我希望布局看起来像现在在Firefox中一样。但我需要它在Chrome和IE中工作。IE似乎不喜欢100%的背景图像

 .header {
 background-image:url(../images/banner-2.jpg);
 background-size:100% auto;
 box-shadow:0 0 10px #000;
 left:0;
 position:fixed;
 top:0;
 width:100%;
 z-index:800;
 padding:8px;
 }

#wrapper {
max-width:960px;
margin:0 auto;
}

/*BRAND DETAILS*/
.logo {
float:left;
margin-left:30px;
padding-top:10px;
width:8%;
}

.brand-title {
float:left;
padding-left:5px;
padding-top:5px;
width:50%;
}

.brand-subtitle {
float:left;
padding-left:5px;
padding-top:25px;
width:60%;
}


/*SOCIAL BUTTONS*/
.socials {
float:right;
height:80px;
position:relative;
right:0;
top:100px;
width:35%;
z-index:900;
}

.facebook {
float:left;
width:60px;
margin:0px 0px 0px 20px;
}

.pinterest,.blogger,.instagram {
float:left;
width:60px;
margin:0px 0px 0px 50px;
}


/*NAVIGATION*/
.nav-container {
float:right;
position:fixed;
right:40px;
top:145px;
width:60%;
z-index:800;
}

---

而不是浮动：左；尝试：

display:inline-block;
vertical-align: middle;

---

我的意思是背景大小（不是“图像”），你仍然可以编辑你的问题来改进它……你能创建一个JSFIDLE（标记和css）来演示你的问题吗？也许可以尝试添加一个。为什么社交按钮在Chrome中如此遥远？Firefox正在做我想做的事情，但Chrome却把它全扔了？