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; < / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: