Question

我的页面上有一个表在Firefox中显示错误但在所有其他浏览器上都没问题。该表位于占据页面75％的div内，表格设置为宽度：100％。但是，在Firefox上，表的宽度大于它所在的div，并且它被推到右边，我不明白为什么。

铬：

火狐：

这是购物车的HTML，从75％div开始：

<div class="cart-left">
    <h1>Cart/Checkout</h1>

    <div class="row medium-12 large-12 columns status">
        <ul class="cart-status">
            <li class="active msd-cart-full">Cart<div class="triangle"></div></li>
            <li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Shipping</span></li>
            <li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Billing</span></li>
            <li><span class="icon"><i class="fa fa-stop"></i></span><span class="text">Confirmation</span></li>
        </ul>
    </div>
    <div id="cartgrid">
        <table id="cart-table">

            <tbody>
                <tr class="heading">
                    <th>Product Information</th>
                    <th>Quantity</th>
                    <th>Item Price</th>
                    <th>Subtotal</th>
                    <th></th>
                </tr>

                <tr class="cart-row gray" data-orderlineid="84e7d94f-9436-47e6-a564-a4df009fc1c6">
                    <td class="product-info" width="45%">
                        <div class="wrap">
                            <div class="small-4 columns item-thumb"><a href="/Catalog/Cardio/Treadmills/B456009801"><img src="/UserFiles/images/products/b2b/TreadA.png" alt="95T Achieve Treadmill"></a></div>
                            <div class="small-8 columns description">
                                <div class="item-name">
                                    <a href="/Catalog/Cardio/Treadmills/B456009801">
                                        95T Achieve Treadmill

                                    </a>
                                </div>
                                <div class="item-num">
                                    <span class="item-num-sku">Product Code: 456009801</span>
                                </div>

                                <div class="availability">
                                    <span class="instock">In Stock</span>

                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="quantity">
                        <div class="wrap">
                            <div class="mobile-label">
                                Quantity
                            </div>
                            <div class="item-qty">
                                <input type="text" id="84e7d94f-9436-47e6-a564-a4df009fc1c6_qty" data-qty-input="" value="1" class="numerictextbox qty txt">
                            </div>
                            <div class="update">
                                <a class="update-btn" id="84e7d94f-9436-47e6-a564-a4df009fc1c6_update" onclick="insite.cart.update($(this));">Update</a>
                            </div>
                        </div>
                    </td>
                    <td class="price">
                        <div class="wrap">
                            <div class="mobile-label">
                                Item Price
                            </div>
                            <div class="price">
                                <span class="price">$3,599.00</span>
                            </div>
                        </div>
                    </td>
                    <td class="subtotal">
                        <div class="wrap">
                            <div class="mobile-label">
                                Subtotal
                            </div>
                            <div class="price">
                                <div class="item-subtotal">
                                    $3,599.00
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="remove">
                        <div class="wrap">
                            <div class="remove">
                                <a class="btn btn-remove" onclick="insite.cart.removeItem('84e7d94f-9436-47e6-a564-a4df009fc1c6')">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="cart-row" data-orderlineid="45ecc3db-c539-4598-8745-a4df009fc23c">
                    <td class="product-info" width="45%">
                        <div class="wrap">
                            <div class="small-4 columns item-thumb"><a href="/Catalog/GroupTraining/Circuit/B455109813"><img src="/UserFiles/images/products/b2b/Optima2.png" alt="Biceps Curl"></a></div>
                            <div class="small-8 columns description">
                                <div class="item-name">
                                    <a href="/Catalog/GroupTraining/Circuit/B455109813">
                                        Biceps Curl

                                    </a>
                                </div>
                                <div class="item-num">
                                    <span class="item-num-sku">Product Code: 455009813</span>
                                </div>

                                <div class="availability">
                                    <span class="instock">In Stock</span>

                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="quantity">
                        <div class="wrap">
                            <div class="mobile-label">
                                Quantity
                            </div>
                            <div class="item-qty">
                                <input type="text" id="45ecc3db-c539-4598-8745-a4df009fc23c_qty" data-qty-input="" value="1" class="numerictextbox qty txt">
                            </div>
                            <div class="update">
                                <a class="update-btn" id="45ecc3db-c539-4598-8745-a4df009fc23c_update" onclick="insite.cart.update($(this));">Update</a>
                            </div>
                        </div>
                    </td>
                    <td class="price">
                        <div class="wrap">
                            <div class="mobile-label">
                                Item Price
                            </div>
                            <div class="price">
                                <span class="price">$149.99</span>
                            </div>
                        </div>
                    </td>
                    <td class="subtotal">
                        <div class="wrap">
                            <div class="mobile-label">
                                Subtotal
                            </div>
                            <div class="price">
                                <div class="item-subtotal">
                                    $149.99
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="remove">
                        <div class="wrap">
                            <div class="remove">
                                <a class="btn btn-remove" onclick="insite.cart.removeItem('45ecc3db-c539-4598-8745-a4df009fc23c')">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

</div>

这是表的CSS并包含div：

    body.checkout-cart-2 { }

[role="main"] .main-row{
    padding-bottom:0;
}

.checkout-cart-2 #cart-table{
    width:100%;
}

.cart-status{
    margin-left:0;
}

.cart-status li {
  display: inline;
  background: #eeeeee;
  padding: 8px 20px;
  font-family: 'VerbBlack';
  font-size: 16px;
  color: #0070c0;
  position:relative;
  text-transform:uppercase;
}

.cart-status li.active {
  background: #464354;
  color: white;
  display:inline-block
}

.cart-status li.active:before{
    margin-right:5px;
}

.cart-status .triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 0 20px 22px;
    border-color: transparent transparent transparent #464354;
    position: absolute;
    top: 0;
    right: -22px;
    z-index: 99;
}

.checkout-cart-2 .return-link {
    margin:1.5em 0;
    }

.checkout-cart-2 .cart-left {
    margin-bottom:0;
    padding:0 15px 15px 15px;
    }

.cart-left h1{
    color:black;
}

.checkout-cart-2 .cart-left, .checkout-cart-2 .cart-right .wrapper{
    background:white;
}
.checkout-cart-2 .cart-right{
    padding-left:2px;
}

#cart-table {
  border-collapse: separate;
  border:none;
    border-spacing: 2px;
}

#cart-table th {
  font-family: 'Verdana';
  font-size: 12px;
  text-transform: uppercase;
  padding:0;
  position:relative;
  border-bottom:none;
}

table tr:nth-of-type(odd) {
  background-color: white;
}

.cart-row td{
  vertical-align:top;
  background:white;
  padding:10px;
  height:100%;
}

.heading{
    position:relative;
    background:white;
}

/*.cart-row.gray .wrap{
  background: #f6f6f6;
  border-bottom: 2px solid #f2f2f2;
}

.wrap{
    height:100%;
    padding:0 10px;
    display:inline-block;
    width:100%;
    width:calc(100% - 2px);
    margin-right:4px;
}*/

.wrap > div {
  margin-top: 10px;
  margin-bottom: 10px;
}

/*.cart-row td:last-child .wrap, .remove .wrap {
    margin-right: 0; 
    width: 100%; 
}*/

table th:after{
    background:black none repeat scroll 0 0;
    bottom: -2px;
    content:"";
    display:block;
    height:1px;
    left:0px;
    position:absolute;
    right:-2px;
}

table th:last-child:after{
    right: 0px;
}

.gray td{
    background: #f6f6f6 none repeat scroll 0 0;
}

.cart-row {
  font-family: 'Verdana';
  height:100%;
}

.cart-row .description{
    padding:0;
}

.cart-row .item-thumb{
    padding-left:0;
}

.cart-row .item-name a {
  font-size: 16px;
  color: #0070c0;
  font-weight: bold;
}

    .cart-row .item-num {
        font-size: 12px;
    }

    .cart-row .update a{
        color: #0070c0;
    }

    .cart-row div.remove a.btn{
        color: #0070c0;
        background:none;
        font-size:22px !important;
          padding: 0 5px 0 1px;
    }

.availability>span {
  font-weight: normal;
}

.cart-right .btns-wrap{
    padding:10px;
}

.order-subtotal {
  border: none;
  margin-bottom:0;
  padding:0 1em;
}

.order-subtotal > .row {
  margin-bottom: 0;
  padding: 5px 0 10px 0;
  border-bottom: 1px solid #e8e8ea;
}

.order-subtotal label{
    margin-bottom:0;
    color: #acacac;
}

.order-subtotal .sub-label{
    font-weight:bold;
}

.order-subtotal .sub-amount{
    font-weight:normal;
}

.checkout-cart-2 .cart-right .btns .btn {
  background-color: #eeeeee;
  text-transform: uppercase;
  font-family: 'VerbBlack';
  font-size: 16px;
  color: black;
  border-bottom: 2px solid #d6d6d6;
}

.checkout-cart-2 .cart-right .btns .btn-checkout{
    background-color: #464354;
    color:white;
    border-bottom:2px solid #464354;
}

.checkout-cart-2 .cart-right .btns .btn-checkout:before{
    font-family:'FontAwesome';
    content:'\f054';
    color: #40bf40;
    position:relative;
    left: -5px;
      top: 2px;
  font-size: 22px;
}

.checkout-cart-2 .cart-right .btns .btn-save-order:before {
  position: relative;
  left: -5px;
}

    /* Clearfix */
    .checkout-cart-2 .cart-left:before,
    .checkout-cart-2 .cart-left:after {
        content: " ";
        display: table;}
    .checkout-cart-2 .cart-left:after {
        clear: both;}

.checkout-cart-2 ul.cart-items {
    margin:0;
    list-style:none;
    }

    @media all and (min-width: 769px) { 
        .checkout-cart-2 .cart-left {
            float:left;
            width:75%;
            }
        }

.checkout-cart-2 .cart-right {
    margin-bottom:1.5em;
    }

.checkout-cart-2 .cart-left .btns {
    margin:1.5em 0;
    }

.checkout-cart-2 .cart-left .btns .btn {
    width:100%;
    margin-bottom:1em;
    }

    .checkout-cart-2 .cart-right .btns a.btn  {
        width:100%;
        margin-bottom:2px;
        }


@media all and (min-width: 769px) {     
    .cart-status li span.icon{
        display:none;
    }

.checkout-cart-2 .cart-right  {
    float:right;
    width:25%;
    }       
}

.checkout-cart-2 .item-details .item-name { 
    padding-right:2.5em;
    }

@media all and (min-width: 769px) {


    .mobile-label{
        display:none;
    }

    #cartgrid-mobile{
        display:none;
    }

    .checkout-cart-2 .item-list .item-details { 
        padding-right:1em !important;
        }

    .checkout-cart-2 .item-details .item-name { 
        padding-right:3.5em;
        }

    .checkout-cart-2 .item-opt .item-subtotal {
        float:right;
        clear: right;
        }   

    }

.checkout-cart-2 .item-list .actions-panel .item-actions {
    text-align:left; }

.checkout-cart-2 .item-list .item-code-notes {
    padding:0;
    float:left;
    width:100%;
    }

.checkout-cart-2 .item-list .item-actions-wrap {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    float:left;
    width:100%;
    }

.checkout-cart-2 .quote-items-note {
    background:#fff6c5;
    border-color:#ffd800;
    }

@media screen and (max-width:768px){
    .checkout-cart-2 .cart-right {
      margin: 0;
      padding: 10px;
    }

    .checkout-cart-2 .cart-left {
      margin-bottom: 10px;
    }

    #cart-table tr.heading{
        display:none;
    }

    tr.cart-row{
        display:block;
        margin-bottom:20px;
        position:relative;
    }

    tr.cart-row td{
        display:block;
        width:100%;
        margin-bottom:-2px;
    }

    .mobile-label{
        float:left;
    }

    .wrap > div:not(.mobile-label):not(.item-thumb) {
      float: right;
    }

    .update{
        display:none;
    }

    .cart-row .wrap{
      background: #f6f6f6;
      border-bottom: 1px solid #e0e0e2;
    }

    .cart-row .remove .wrap {
      border-bottom: none;
    }

    td.product-info .wrap {
      border-top: 1px solid #c7c7cc;
    }

    .item-qty input {
      margin-bottom: 0;
    }

    .remove {
      position: absolute;
      top: 0;
      right: 0;
    }

    .cart-row.gray .remove .wrap {
      border: none;
    }

    .cart-row div.remove a.btn {
      background: #0070c0;
      padding: 8px 10px;
      color: white;
      position: relative;
      top: -29px;
      right: 11px;
    }

    .item-name {
      padding-right: 25px;
    }

    .quantity .mobile-label {
      margin-top: 20px;
    }

    #cart-table tr:last-child, table {
      margin-bottom: 0;
    }

    .cart-right .wrapper {
      border-top: 1px solid #c7c7cc;
    }  

    .cart-status li span.icon{
        display:none;
    }
}

@media screen and (max-width:760px){
    .cart-status li span.text{
        display:none;
    }

    .cart-status li span.icon {
      font-size: 10px;
      top: -2px;
      position: relative;
      display:inline;
    }

    .cart-status li:not(.active) {
      margin-right: -4px;
      padding: 12px 30px;
    }

    div.row.status{
        width:100%;
    }

    .cart-status li.active {
      padding:14px 20px;
      position:relative;
      display:inline;
    }

    .cart-status .triangle{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 24px 0 23px 22px;
        border-color: transparent transparent transparent #464354;
        position: absolute;
        top: 0;
        right: -22px;
        z-index: 99;
    }

    .cart-status{
        margin-bottom: 40px;
    }
}

编辑：我尝试了'table-layout：fixed'，它正确地设置了我的表的大小，但是将所有列设置为相同的宽度，这不起作用。

编辑2：我尝试在表格元素上放置'display：block';这使得桌子的大小合适，但是还是太大了。我不得不继续在tbody，tr，td等上放置'display：block'以使它们适合包含div的宽度，但是这会破坏表格单元格的大小。

表尺寸和尺寸Firefox上定位错误，其他浏览器也不错

0 个答案: