Chrome和IE11中的樣式不同

Question

我遇到了非常煩人的問題。 Chrome和IE對樣式表的解釋不同。 有時差異5-10px （不是問題），但有時100-200px 。

問題是我使用z-index和position:relative是否會產生影響？

我已經嘗試了所有方法：使用get導航器（或類似的東西，現在不記得了）的IE樣式表，僅IE注釋。 沒有任何幫助。

有什么辦法可以解決這個問題？ 我正在創建一個游戲，所以如果能在所有瀏覽器上正常運行，那就太好了

Answer 1

最近我遇到了類似的問題，並獲得了在可能導致溢出的對象上使用“溢出：隱藏”的提示。 IE在這方面比較友好，即使在這里出現“碰撞”時也可以讓對象流動，但是我認為Chrome更為正確。

它為我解決了一些問題，因此值得一試。

Answer 2

由於所有瀏覽器都有自己的CSS實現方式，因此最好添加default css ，以覆蓋現有的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;
}