我有一个用于信息板的非常简单的css布局,您可以在以下位置找到它:http://jsfiddle.net/ciel/pRq8Z/2/
它在所有浏览器中都工作得很好,但在IE中,它在.links部分有一个令人尴尬的‘偏移量’65,所以它显示在错误的位置。在jsfiddle上,这个漏洞是显而易见的,但它并不那么明显--但在整个网页中,它产生了相当大的不同。IE中的.links窗格填充错误。
有没有什么我可以做的这个迟钝的‘偏移’,似乎来自IE的任何地方?(所有版本,甚至9.0)
CSS重置
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; }发布于 2011-03-10 00:12:29
嗯,我不确定,但也许使用UL而不是DIV可以在某种程度上纠正这个问题……:)
发布于 2014-03-11 07:50:19
您有正在触发兼容模式的内容。也许你有该网站,并在兼容模式设置中的小提琴手。
要进行测试,请将所有这些内容复制到一个文件中,并使用和不使用doctype作为html进行测试。你会看到,没有你得到奇怪的偏移量。有了它,偏移量就消失了。
使用ul而不是div只能解决这个问题,因为在兼容模式下,li之外的文本节点没有大小。在div中,它们有。
https://stackoverflow.com/questions/5247677
复制相似问题