Question

我正在创建一个包含一些图片链接的框，目前我在Chrome和Safari上看起来很棒，但是在Firefox的默认缩放级别上有所体现。放大使得盒子看起来很好，但是在正常的缩放级别它们被包裹。以下是Chrome上正常情况：

Chrome screenshot

......这就是它在Firefox上的表现：

Firefox screenshot

关于这一点的奇怪之处在于右边的框没有完全包裹：第一行上可以看到一些顶部和底部边框，我无法理解为什么它被包裹在这个特定点。这就是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和孩子

做同样的事情

Answer 2

上课，'buyLinksBoxLeft'＆amp; 'buyLinksBoxRight'改变

display: inline;

到

display: inline-block;

小提琴：http://jsfiddle.net/aqAVy/

应该解决这个问题。

Answer 3

避免名称冗余......例如。将.BuyLinksBoxRight（.BuyLinksBox的儿子）改为.right（与.left相同）
当多个项目具有许多常见属性时，请将它们分组到一个公共选择器中。
尽可能使用oneliner paddings和border。

代码将更具可读性，问题将消失。

Running Demo

.buyTrackContainer {
    text-align : center;
}

.buyTrackContainer > div, 
.buyLinksBox > div {
    display : inline-block;
     border : 1px solid #ddd;
}

.buyTrackBox {    
    background-color : #fff;         
       border-bottom : 3px solid #ddd;
       border-radius : 3px; 
          text-align : left;
             padding : 1px 3px 5px 3px;
               width : 134px;
}

.buyLinksBox {        
    padding-bottom : 10px;
       padding-top : 8px;
        text-align : center;
}

.buyLinksBox > div {
    background-color : #fff;
      vertical-align : center;              
       border-bottom : 3px solid #ddd;
          text-align : center;
}

.buyLinksBox > .left {
    border-radius : 3px 0px 0px 3px;
          padding : 12px 4px 8px 8px;
}

.buyLinksBox > .right {
    border-radius : 0px 3px 3px 0px;
      border-left : 0px;
          padding : 12px 8px 8px 4px;
}

.buyLinksBox > div > a > div {
    margin-left : 0px;
         height : 17px;     
          width : 50px;         
}

div.d-amazon, div.b-amazon {
    background : url(/images/misc/Amazon-buy-button.png) no-repeat;
}

div.d-itunes {
    background : url(/images/misc/iTunes-buy-button.png) no-repeat;
}

div.b-ebay {
    background : url(/images/misc/eBay-buy-button.png) no-repeat;
}

包裹在Firefox上的div对

3 个答案: