html - Firefox 上的一对 div 包装

Question

我正在创建一个包含一些图像链接的框，目前我有一些在 Chrome 和 Safari 上看起来很棒，但在 Firefox 的默认缩放级别下显示的内容。放大使框看起来不错，但在正常缩放级别它们被包裹起来。在 Chrome 上通常是这样的:

...这是它在 Firefox 上的样子:

奇怪的是右边的盒子没有完全包裹起来:第一行可以看到一些顶部和底部的边框，我不明白为什么它在这个特定的点被包裹起来。这是 HTML 的样子:

<div class="clearfix buyTrackContainer">
<div class="buyTrackBox">
    <p>Buy this Track</p>
    <div class="buyLinksBox">
        <div class="buyLinksBoxLeft">
            <a href="{{ buylink-itunes }}" target="_blank"><div class="d-itunes"></div></a>
        </div>
        <div class="buyLinksBoxRight">
            <a href="{{ buylink-amazon }}" target="_blank"><div class="d-amazon"></div></a>
        </div>
    </div>
</div>
<div class="buyTrackBox">
    <p>Buy on Vinyl/CD</p>
    <div class="buyLinksBox">
        <div class="buyLinksBoxLeft">
            <a href="{{ buylink-ebay }}" target="_blank"><div class="b-ebay"></div></a>
        </div>
        <div class="buyLinksBoxRight">
            <a href="{{ buylink-amazon }}" target="_blank"><div class="b-amazon"></div></a>
        </div>
    </div>
</div>

...以及相关的CSS如下:

.buyTrackContainer {
    text-align: center;
}
.buyTrackBox {
    display:inline-block;
    border:1px solid #ddd;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    padding-bottom: 5px;
    width:46%;
    text-align:left;
    background-color: #fff;
    border-radius: 3px;
    border-bottom:3px solid #ddd;
}
.buyLinksBoxLeft {
    display:inline;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    border-radius: 3px 0px 0px 3px;
    padding: 12px 4px 8px 8px;
    text-align:center;
    vertical-align:center;
    background-color:#fff;
}
.buyLinksBoxRight {
    display:inline;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ddd;
    border-radius: 0px 3px 3px 0px;
    border-left:0px;
    padding: 12px 8px 8px 4px;
    text-align:center;
    vertical-align:center;
    background-color:#fff;
}
.buyLinksBox {
    display:block;
    text-align:center;
    padding-bottom:10px;
    padding-top:8px;
}
div.d-itunes {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.d-amazon {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.b-ebay {
    display:inline-block;
    margin-left:0px;
    width:50px;
    height:17px;
    background:url(/images/misc/eBay-buy-button.png) no-repeat;
}

我对正确的 CSS 设计还比较陌生，所以我很感激任何关于如何改进我的编码风格的建议。有谁知道这里可能发生什么可能导致这种情况？

Answer 1

我将尝试对第一个容器进行更改，将以下内容添加到

.buyTrackBox {
white-space:nowrap
}

.buyLinksBoxLeft {
float:left;
}

.buyLinksBoxRight {
float:right;
}

更多尝试将 buyLinksBoxLeft 和 buyLinksBoxRight 的宽度按百分比划分，以适应父容器，大约 40% 可能会做.对 buyLinksBox div 和 children

做同样的事情