css - 如何调试 CSS 规范中未涵盖的声明组合导致的不一致？

Question

下面的两个屏幕截图显示了 Chrome 31(左侧)和 Safari 6 对相同 HTML+CSS 的演绎版(在本文末尾给出)之间的巨大差异。可查看页面here .注意:此页面未使用 JS。

对于这种大范围的差异，一个可能的解释是该页面的样式表包含 一些 CSS 规范未涵盖的声明组合，这意味着每个浏览器都可以任意解释它。 (在这种情况下，例如，“超出规范的组合”可能是 max-width: 400px; 和 display:table; 的声明对.main 选择器。)

问题:是否有一些自动化的方法来检测这种“不符合规范”的声明组合？

值得注意的是，这里给出的例子可能相对容易通过检查来诊断(至少对于那些对 CSS 规范有非常全面掌握的人来说)，但这并不难想象这种“超出规范”的组合可能会更加微妙地出现(例如，通过单独样式表中的声明之间的交互等)。因此，一些识别此类“不合规范”组合的工具将大有帮助。

对于这种事情，我能想到的唯一工具是 CSS Lint , 但它不会在 CSS 中提取任何可能导致修复上述差异的内容。

---

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-family:consolas,monaco,courier,monospace;
}

.banner{
  background:lightgray;
}
.header{
  height:50px;
}
.footer{
  height:300px;
}

.main{
  position:relative;
  max-width:400px;
  margin:0 auto;
  padding:10px;
  display:table;

  background-color:steelblue;
}

.left-panel{
  position:absolute;
  background-color:#555;
}
.vfloat{
  position:absolute;
  padding:10px 30px;
  background-color:#0aa;
  font-size:15px;
}

.right-panel{
  margin-left:200px;
}
.vfixed{
  padding:20px 60px;
  background-color:orange;
  font-size:30px;
}

<div class="header banner"></div>

<div class="main">

  <div class="left-panel">
    <div class="vfloat"><p>Donec laoreet, justo eget luctus pulvinar, nulla mauris facilisis massa, sit amet egestas lacus erat eu felis. In at urna eu elit dictum porttitor. Ut dictum justo nec urna mattis, ut pharetra mauris adipiscing. Pellentesque lacinia turpis id vulputate commodo. Nullam fringilla justo vitae consequat euismod.</p></div>
  </div> <!-- .left-panel -->
  <div class="right-panel">
    <div class="vfixed"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque magna lacus, sed porttitor tortor ultricies ut. Quisque tellus lectus, tincidunt et elementum a, viverra non diam.</p></div>
  </div> <!-- .right-panel -->

</div> <!-- .main -->

<div class="footer banner"></div>

Answer 1

您有一个带有display:table 的容器。因此，您应该拥有带有 display:table-row 和 display:table-cell 的元素。但你没有。然后你想知道为什么它呈现怪异......