如何调试CSS规范中未涉及的声明组合导致的不一致？

Question

下面的两个屏幕截图显示了Chrome 31(左侧)和Safari 6的相同HTML + CSS(在本文末尾给出)之间的巨大差异.该页面可在此处查看.注意:此页面不使用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。但你没有。然后你想知道为什么它看起来很奇怪......