图像与firefox中的文本重叠

Question

我有一个加载图片的css文件。页面在chrome中加载得很好但是当我在firefox中看到页面时，我看到图像重叠。我已经附加了我认为错误的代码片段。我试过调试但找不到任何东西。任何帮助，将不胜感激。谢谢。

.row_template:before {
  content: " ";
  display: table;
  -moz-box-sizing: border-box;
  height: 0px;
}
.row_template:after {
  content: " ";
  display: table;
  clear: both;
  -moz-box-sizing: border-box;
  height: 0px;
}
.header_template .row_template #template {
  float: left;
  width: 60%;
}
.header_template .row_template #template h1 {
  /*padding-left: 30px;*/
  margin-bottom: 0px;
  margin-top: 25px;
}
.header_template .row_template #template h1 a {
  color: #C11B17;
  text-shadow: 1px 1px #e0e0e0;
}
.row_template #template {
  text-align: left;
  min-width: 200px;
}
.row_template #template a {
  /*margin-right: 30px;*/
  margin-left: 30px;
}
.eight_template {
  width: 77.7777%
}
.columns_template {
  float: left;
  min-height: 1px;
  position: relative;
}
.header_template .row_template a:hover {
  background-color: transparent;
}
.header_template .row_template img {
  border: 0 none;
}
.header_template .row_template a {
  color: #577C8D;
}
.title {
  color: #577C8D;
  font-size: 30px;
  font-weight: bold;
}

<div id="top_template">
  <div class="row_template">
    <a href="http://google.com" title="Google" target="_blank"><h2>Google</h2></a>
  </div>
  <!-- / row -->
</div>
<div class="header_template">
  <div class="row_template">
    <div class="columns_template" id="logo_template">
      <a href="http://docs.google.com" target="_blank">
        <img src="img/component.png" alt="Docs logo" title="Docs logo">
      </a>
    </div>
    <!-- / #logo -->
    <div class="eight_template columns_template" id="component_template">
      <h1><a class="title" href="https://portal.hm.in/">Portal</a></h1>
    </div>
    <!-- / #component -->
  </div>
  <!-- / row -->
</div>