Question

我有一个非常简单的css布局，可以找到一大堆信息，你可以在http://jsfiddle.net/ciel/pRq8Z/2/

找到它。

它适用于所有浏览器，但在IE中，它对.links部分有65的尴尬'偏移'，因此它显示在错误的位置。在jsfiddle中，缺陷是可见的，但它并不那么明显 - 但在整个网页中，它产生了巨大的差异。 IE中.links窗格填充错误。

对于这种似乎在IE中无处可见的延迟“偏移”，我能做些什么吗？（所有版本，甚至9.0）

CSS RESET

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
body {
    font-family: 'Lucida Sans Unicode'; 
    font-size: 11px;
    background-repeat: no-repeat; 
    margin: 0px auto; 
    width: 960px; 
    position: relative; 
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colors to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/* Remove the bullets on ordered and unordered lists. */
ol,ul { list-style:none; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove border on linked images. */
a img { border: none; }
a { outline: none; text-decoration: none; }
a:active, a:visited, a:link { text-decoration: none; }

:focus { outline: 0; }

/* Make sure that all input elements have default margins and padding. */
input { margin: 0; padding: 0; border: 0; }

Answer 1

嗯，我不确定但是使用UL而不是DIV会以某种方式纠正这个问题... :)

Answer 2

你有一些东西正在触发兼容模式。也许您在兼容模式设置中拥有该网站和提琴手。

进行测试，将所有内容复制到文件中，并使用和不使用doctype作为html进行测试。你会看到没有你得到奇怪的偏移。有了它，偏移就消失了。

使用ul而不是div只能解决它，因为在兼容模式下，li中的文本节点没有大小。他们有div。

与其他浏览器相比，IE（所有版本）中的奇怪偏移

CSS RESET

2 个答案: