首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >与其他浏览器相比,IE (所有版本)中的奇怪偏移量

与其他浏览器相比,IE (所有版本)中的奇怪偏移量
EN

Stack Overflow用户
提问于 2011-03-09 23:02:48
回答 2查看 2.2K关注 0票数 0

我有一个用于信息板的非常简单的css布局,您可以在以下位置找到它:http://jsfiddle.net/ciel/pRq8Z/2/

它在所有浏览器中都工作得很好,但在IE中,它在.links部分有一个令人尴尬的‘偏移量’65,所以它显示在错误的位置。在jsfiddle上,这个漏洞是显而易见的,但它并不那么明显--但在整个网页中,它产生了相当大的不同。IE中的.links窗格填充错误。

有没有什么我可以做的这个迟钝的‘偏移’,似乎来自IE的任何地方?(所有版本,甚至9.0)

CSS重置

代码语言:javascript
复制
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; }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-03-10 00:12:29

嗯,我不确定,但也许使用UL而不是DIV可以在某种程度上纠正这个问题……:)

票数 0
EN

Stack Overflow用户

发布于 2014-03-11 07:50:19

您有正在触发兼容模式的内容。也许你有该网站,并在兼容模式设置中的小提琴手。

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

使用ul而不是div只能解决这个问题,因为在兼容模式下,li之外的文本节点没有大小。在div中,它们有。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5247677

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档