td，在div中的宽度为100％，绝对位置

Question

Behavior of code snippet is different in Chrome 51.0.2704.103 and Firefox 47.0.1 .

Please explain why this happens. Where behavior is correct, where not and why you think so. Thanks.

 div, td { border: 1px solid black; } .container { position: absolute; } .w100Pc { width: 100%; } .nowrap { white-space: nowrap; } 

 <div class="container"> <div>Modal dialog header</div> <table> <tr> <td class="w100Pc">rest of space column</td> <td class="nowrap">content based width column</td> </tr> </table> <div>Here goes main content what should stretch "container" width</div> <div>Modal dialog footer</div> </div> 

Answer 1

Browser render the code differently i guess it's because they follow different standards, i think Firefox is rendering the code currently in you example and to make it look the same in both browsers just add display:block;

 div, td { border: 1px solid black; } .w100Pc { display:block; width: 100%; font-family:'Times New Roman'; } .container { position: absolute; left: 200px } 

 <div style="position: absolute; left:200px"> <table class="w100Pc"> <tr> <td class="w100Pc"> w100Pc </td> <td>buttons</td> </tr> </table> </div>