幅が100％でdiv内の絶対位置が

Question

Chrome 51.0.2704.103とFirefox 47.0.1のコードスニペットの動作が異なります。

これがなぜ発生するのか説明してください。どこで行動が正しいのか、そうでないのはなぜ、そう思うのか。ありがとう。

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

ブラウザ違った私は、彼らは別の基準に従うので、私はFirefoxがあなたの例では、現在のコードをレンダリングしていると、それだけで追加両方のブラウザで同じに見えるように考えることだと思うのコードをレンダリング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>