firefox

Question

此页面上的表格带有display：table-caption set。

http://www.petersen-stainless.co.uk/lifting/CE-swage-sockets/stainless-steel-threaded-sockets.html

HTML是：

<table class="product-data">
                <caption>
                    Rated for lifting in accordance with EN 13411-8. WLLs stated based on 90% of wire MBL at a 6:1 factor of safety. All terminals permanently etched with CE mark and batch identification number.
                </caption>
                <tbody>
                    <tr>
                        <td data-th="Product Code">SCM6X3R-EN</td>
                        <td data-th="Wire (mm)">3</td>
                        <td data-th="Thread">M6</td>
                        <td data-th="D (mm)">6.3</td>
                        <td data-th="L (mm)">97.0</td>
                        <td data-th="CT (mm)">47.0</td>
                        <td data-th="WLL 7x19 / 6x19-IWRC">70kg</td>
                        <td data-th="WLL 6x36-IWRC">N/A</td>
                    </tr>                   
                    </tbody>
            </table>`

我使用的CSS：

.content .product-data {
    float: left;
    margin-right: 20px;
    width: 70%
}

.product-data caption {
    display: table-caption;
    width: 100%;
    margin-bottom: 2em;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-top: none;
}

它在webkit浏览器中以100％的宽度显示，但在firefox中它是页面宽度的100％。我怎样才能让这个标题适合firefox？这是一个错误吗？似乎不应该这样表现。如果是这样有任何解决方法吗？

Answer 1

请尝试添加

.content .product-data { display: inline-block; }

问题将在firefox

中修复