Firefox和Chrome中的样式差异

时间:2016-06-28 16:48:47

标签: css google-chrome firefox cross-browser

我正在使用Wordpress菜单,菜单上的徽标存在样式差异。

对于chrome来说,一切似乎都很好。菜单如下所示:

enter image description here

然而,在Firefox中,菜单如下所示:

enter image description here

我不确定样式差异的来源。 有谁知道如何解决这个问题?我尝试过添加自定义css,但我似乎无法让两个浏览器都符合要求。

谢谢。

<div class="logo left">
   <a href="http://www.data-profits.com/" rel="home">
   <img alt="" src="http://www.data-profits.com/wp-content/uploads/2016/05/dataProfitsLogoGlow-300x691.png">
   </a>
 </div>

相关的CSS是:

header.top-head .logo {
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
display: table;
height: 90px;
float: left;
}
.stickyHeader .logo {
   transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   height: 60px !important;
  }
.head-7 .logo {
  height: 70px !important;
}
.logo.left {
  position: absolute;
}
.left {
   float: left !important;
 }
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
   display: block;
}

0 个答案:

没有答案