Chrome和IE11的不同风格

Question

我有个很烦人的问题。Chrome和IE对样式表的解释不同。有时差异就像5-10px (不是问题)，但有时就像100-200px。

问题是，我使用z-index和position:relative，这有影响吗？

我已经尝试了所有的方法:使用get navigator的IE的不同样式表(或者类似的东西，现在不记得了)，只有IE的注释。什么都没有用。

有没有办法解决这个问题？我正在创建一个游戏，所以如果它能在每个浏览器上运行就好了

Answer 1

我最近遇到了一个类似的问题，并得到了在可能导致溢出的对象上使用" overflow : hidden“的提示。IE在这方面比较友善，即使这里有“碰撞”，也会让对象流动，但我猜Chrome更正确。

它为我解决了问题，所以可能值得一试。

Answer 2

因为所有浏览器都有自己的CSS实现方式，所以添加default css总是很好的，它将覆盖它们现有的特性，并将所有内容放在同一级别。在顶部添加reset.css

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}