IE 7 DIV向右移动

编程问答 2022-04-26

问题描述

| 在IE 7中，我的div向右移动太多，而在Google Chrome浏览器中却正常运行。起初我以为是z索引，但后来得出的位置是：绝对 有没有人遇到修复，将不胜感激！ 屏幕截图： IE7 http://i56.tinypic.com/2vjsqwz.png 这是CSS： 
#rightinfohomecontainer {
height: 300px;
width: 400px;
margin-top:160px;
    float: left;
z-index: 3;
overflow: hidden;
position: relative;

#rightinfoBoxhome {
float: left;
height: 100px;
width: 400px;
z-index: 2;
overflow: visible;
position: absolute;
margin-left: 0px;

#rightinfoBoxtext {

float: left;
height: 245px;
width: 344px;
z-index: 1;
margin-top: 60px;
padding-left: 50px;
overflow: hidden;
padding-right: 6px;
padding-top: 2px;
margin-left: 0px;
position: absolute;
}
#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
}
的HTML 
<div id=\"rightcolumn\">
<div id=\"rightinfohomecontainer\">
<div id=\"rightinfoBoxhome\"><img src=\"images/aboutus.png\" /> </div>
<div id=\"rightinfoBoxtext\"></div>
</div></div>
    

解决方法

        如果没有看到实际的页面，将很难诊断。这可能与左图的CSS有关，但这不包含在您的问题中。您的绝对位置绝对是毫无意义的，因为该div无论如何已经是其父级的0px 0px。 我的猜测是这不是IE7问题，而是总体上不正确/不好的CSS问题。创建一个jsfiddle，我可以进一步看它。 对于初学者，您可能应该尝试使用CSS重置（如下面的链接），或者至少尝试将其放在主CSS样式表的顶部： 
* {
    margin: 0px;
    padding: 0px;
}
这将以所有元素默认为0的边距和0填充的默认值启动所有浏览器-因为某些浏览器有自己的想法，并认为您确实想要填充/边距。 CSS重置 编辑： 不要使用表格（永远-尤其是您的菜单） 没有理由设置溢出：可见；这是默认值 尝试不要将所有内容都设置为绝对浮动-例如-幻灯片是否需要浮动？如果仅使列处于浮动状态就可以摆脱困境，那么情况会更好，并且希望可以更清楚地说明问题所在。 导致IE7崩溃的整体问题：不能确定。将您的页面减少到最低限度-2列。使CSS仅与那些2一起使用，并尽可能少地使用CSS。然后，当您也可以在IE7中使用它时，您可以慢慢添加诸如图像，菜单等之类的内容。每次添加后都要检查是否有螺丝钉。 抱歉，我无法提供更多帮助，但这是这样做的方法。如果您将其完全剥离，但仍然无法使用，请发送指向该jsfiddle的链接。     ,        某些代码没有意义。 您在div上具有绝对的位置，这些div似乎没有top，bottom，left或right的值。如果您自己不设置这些值，Absolute将使用默认值作为上下值。 您的div的z-index值彼此之间不在同一级别。 div，rightinfohomecontainer比其包含的一些diov窄。这是故意的吗？ 进行调试，请尝试使用： 
#rightinfohomecontainer,#rightinfohomecontainer div{
border: 1px solid blue;
}
这可能会向您显示哪个div正在推动事情发展，并且需要引起注意。     ,        您提供的CSS无效，缺少一些
}
。查看您的原始CSS是否也缺少它们。 您以绝对值声明一些div，但同时也使它们浮动。我认为这是个坏主意。 您声明一些div宽度+边距+填充。可能是问题所在。 最后，试试这个： 
#rightinfohomecontainer {
    height: 300px;
    width: 400px;
    margin-top:160px;
        float: left;
    z-index: 3;
    overflow: hidden;
    position: relative;
    border:2px solid gray;
    background:#ddd;
}
#rightinfoboxhome {
    height: 100px;
    width: 400px;
    z-index: 2;
    overflow: visible;
    position: absolute;
    margin-left: 0px;
    border:2px solid blue;
    background:lightblue;
}

#rightinfoboxtext {
    height: 245px;
    width:100%;
    z-index: 1;
    margin-top: 60px;
    padding-left: 50px;
    overflow: hidden;
    padding-right: 6px;
    padding-top: 2px;
    margin-left: 0px;
    position: absolute;
    border:2px dotted green;
    background:lightgreen;
}

#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
    border:2px solid red;
    background:#cc55cc;
}
我删除了一些样式，更改了1 div宽度（至100％），并添加了一些代码在我的浏览器中进行测试（即，边框和背景（用于z-index问题））。 您首先应该重新考虑如何使用CSS进行样式设置，可能还有其他部分可以删除（例如，#rightinfoboxhome margin-left）。     
divdiv向右移动移动