html - 包含在链接中的图像仅在 Firefox 中被另一个 float 链接重叠，Chrome 和 IE 都可以

Question

我有一个导航栏，它在调整页面大小时按比例缩放其大小:

HTML:

<div class="wrap">
    <div id="breadcrumbs">
        <div class="breadcrumbs-insert">
            <a href="#"><img src=
            "http://i.imgur.com/1gLVM1T.png"></a>
            <a href="#">Text 1</a>
            <span>Text 2</span>
        </div>
    </div>
</div>

和 CSS:

#breadcrumbs {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 2.5%;
        letter-spacing: 1px;
        font-size: 0.35em;
        font-family: 'HelveticaNeue-Light', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        background: #0073b5;
        color: #ffffff;
    }

    .breadcrumbs-insert {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #breadcrumbs span {
        line-height: 100%;
        height: 72%;
        padding-top: 0.7%;
        float: left;
        display: block;
        padding-right: 2.08333%;
        padding-left: 2.08333%;
        background: #39a9d1;
        color: #ffffff;
        text-decoration: none;
    }

    #breadcrumbs a {
        line-height: 100%;
        height: 72%;
        padding-top: 0.7%;
        float: left;
        display: block;
        padding-right: 1.04166%;
        padding-left: 1.04166%;
        color: #ffffff;
        text-decoration: none;

    }

    #breadcrumbs img {
        height: 100%;
    }

    #breadcrumbs a:hover, a:active, a:visited {
        color: #ffffff;
        text-decoration: none;
        background: #39a9d1;
    }

    #breadcrumbs a:hover, a:active {
        background: #39a9d1;
    }

    #breadcrumbs a:first-of-type {
        margin-left: 1.04166%;
        padding-left: 0.26041%;
        padding-right: 0.26041%;
        height: 100%;
        padding-top: 0;
    }

    #breadcrumbs a:last-of-type {
        padding-right: 2.08333%;
    }

这是 fiddle https://jsfiddle.net

出于某种原因，在 Firefox 中，环绕图像的第一个链接与下一个 float 链接重叠。 Chrome 和 IE 运行良好。

几个小时以来一直在努力解决这个问题，最后放弃了......

Answer 1

您可以使用无序列表代替导航。

html:

<ul>
  <li><a href="url">text 1</a></li>
  <li><a href="url">text 2</a></li>
</ul>

CSS:

  ul li { 
  display: inline; 
  list-style-type: none;
  }

不确定这是否是您要尝试执行的操作，但在您的示例中这对我来说已经解决了问题。