The two screenshots below show the huge difference between the versions of Chrome 31 (left) and Safari 6 of the same HTML + CSS (given at the end of this post). The page can be viewed here . NB: this page does not use JS.
One possible explanation for this wide discrepancy is that the stylesheet for this page includes some combination of ads that are not covered by the CSS specification, which means that every browser can freely interpret it arbitrarily. (In this case, for example, the “out of specification” combination may be a pair of max-width: 400px; and display:table; .main for the .main selector.)
Question: Is there any automated way to detect such “out of specification” combinations of declarations?
It is worth noting that the example given here can be relatively easy to diagnose by checking (at least for someone who knows the CSS specification very carefully), but does not imagine situations in which such “out-spec” can arise much more subtly (for example, by interacting between declarations in separate style sheets, etc.). Therefore, some tool for defining such combinations “out of specification” would be a huge help.
The only tool I could think of that kind was CSS Lint , but it doesn’t take anything into CSS, it can resolve the inconsistency shown above.
*{ -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> <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> </div> <div class="footer banner"></div>