0

我正在创建一个包含一些图像链接的框，目前我有一些在 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 设计比较陌生，所以我会很感激任何关于如何改进我的编码风格的指示。有谁知道这里可能会发生什么导致这种情况？

4

3 回答 3

0

我将尝试使用第一个容器更改添加以下内容

.buyTrackBox {
white-space:nowrap
}

.buyLinksBoxLeft {
float:left;
}

.buyLinksBoxRight {
float:right;
}

更多的尝试除以百分比的宽度，buyLinksBoxLeft以buyLinksBoxRight适应父容器，周围的一些事情40%可能会做。buyLinksBox对div 和孩子做同样的事情

于 2013-10-31T13:57:57.263 回答
0

在你的课堂上，“buyLinksBoxLeft”和“buyLinksBoxRight”发生了变化

display: inline;

至

display: inline-block;

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

那应该解决它。

于 2013-10-31T13:59:39.677 回答
0

  1. 避免名称中的冗余......例如。将.BuyLinksBoxRight( 的.BuyLinksBox) 更改为.right( 与 相同.left)

  2. 当多个项目有很多共同的属性时，将它们分组在一个共同的选择器中。

  3. 尽可能使用单线填充和边框。

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

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;
}
于 2013-10-31T14:51:06.780 回答