Tabellenbeschriftungsbreite in Firefox

Question

Die Tabelle auf dieser Seite enthält eine Beschriftung mit Anzeige: Tabellenbeschriftungssatz.

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

Die HTML ist:

<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>` 

Und die CSS-I verwendet:

.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; 
} 

Es zeigt auf 100% Breite der Tabelle in Webkit-Browsern aber in firefox es ist 100% Breite der Seite. Wie kann ich diese Beschriftung richtig in Firefox finden? Ist es ein Fehler? Es scheint, als sollte es sich nicht so verhalten. Wenn ja, gibt es irgendwelche Arbeitsumstände?

Answer 1

Bitte versuchen Sie es

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

Die Frage hinzufügen wird in Firefox