Question

我真的很讨厌问题。 Chrome和IE以不同方式解释样式表。有时差异就像5-10px（不是问题），但有时候100-200px。

问题是我使用z-index而position:relative这会产生影响吗？

我已经尝试了一切：IE使用get navigator（或类似的东西，现在不记得）的不同样式表，仅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;
}

Chrome和IE11的风格各异

2 个答案: