Html internet explorer中的外观不正确

我在InternetExplorer7、6等中的外观不正确。它是从我添加

float:right至
#社会共享
div标签。我尝试设置
display:inline块到它和
清除：两者都有
你可以。这是我的密码：

HTML

这是正确的外观：


这是正确的外观（ie7，6）


忽略CSS3相关的东西，问题是IE 7. 6中的所有东西都被压缩到顶部，搜索条出现在中间而不是右边。
 
看起来你需要a：
将其添加到包含浮动元素的元素中
看起来您需要：

根据我所看到的（抱歉，没有IE6或IE7可用），将此添加到包含浮动元素的元素中，您可以通过使用
位置和
顶部来解决此问题，而不是像这样使用负边距：

删除
页边距：-57px 0从
#徽标
到
顶部：0px。因为您已经在使用
position:absolute，这将为您将徽标放置在屏幕的顶部边缘

删除
页边距：-47px 0来自
#社会共享
并添加
位置：相对；顶部：-47px

可能还需要包括JKirchartz提到的正确的
清除
或“清除修复”
 根据我所看到的（对不起，没有IE6或IE7可用），您可以通过使用
position
和
top
来解决此问题，而不是像这样使用负边距：

删除
页边距：-57px 0从
#徽标
到
顶部：0px。因为您已经在使用
position:absolute，这将为您将徽标放置在屏幕的顶部边缘

删除
页边距：-47px 0来自
#社会共享
并添加
位置：相对；顶部：-47px

可能还需要包括JKirchartz提到的正确的
清除
或“清除修复”
 在IE7中，您的顶级导航系统正在崩溃，因为它没有正确定义什么去哪里以及如何去哪里。首先，您的徽标在文档中有点“浮动”，因为它在容器中绝对没有参考点，所以让我们从修复它开始

将
position:relative
添加到您的
#header wrapper
CSS规则中，以便我们可以在其边界内正确包含您的徽标：

#header-wrapper {
  position:relative;
}

接下来，我们必须重新排列您的徽标，以正确地坐在您的<代码>标头包装器< /代码> div的中间。以前您使用的是代码>空白：-57 px汽车0自动；<代码>对齐你的徽标，但是既然你已经完全定位了，你根本就不需要边缘（一个奇迹，它甚至还在工作），所以让我们做一些数学来绝对地把你的logo放在你的头包装DIV的中间：
首先，我们删除该保证金声明，并将其替换为以下内容：

#logo {
    left: 50%;
    top:-57px;
    margin-left: -102.5px;
}

现在，我们在这里做了什么？首先，我们将您的徽标从左侧推50%，然后以负边距向后推-102.5像素。我们为什么要这样做？因为
left
声明将宽度添加到计算中，从而推送元素，因此推送实际上意味着“元素的50%向左+宽度”，因此，我们使用负边距来补偿宽度，
50%-宽度/2
。这是一个更好的过程解释

在我列出的两个更改完成后，您会发现徽标位于幻灯片区域的后面，这是由于

header {
    position:relative;
    z-index:999; /* ie7 z-index bug fix */
}

我们将标题部分定义为
position:relative
，并将其设置为比幻灯片区域更高的
z-index
，这样您的徽标就会覆盖在幻灯片上

现在，为了解决搜索栏自身定位向左而不是向右的问题，我们必须将您的
#social share
部分定义为
position:absolute
，然后使用
right:0
将其向右推，为什么？因为IE7将您的搜索栏定位在
#社交共享
的旁边，而该用户正通过使用负边距被推到顶部，因此并没有像预期的那样从流中删除（令人惊讶的是，它实际上在现代浏览器中起作用）。因此，将您的
#社会共享
部分定义为绝对，问题就解决了：

#social-share {
   position:absolute;
   right:0;
}

最后一个修复是一个条件类，我们将使用它来定位您的
#u atssh
标记，使其相对于您的文档进行定位。IE7没有考虑到这一点，因为它是绝对定位的，这样就消除了很长的空间

我们可以利用样板文件添加到
标记中的条件类，仅针对IE7进行修复：

.ie7 #_atssh {
    position:relative;
}

注意：可能有10亿个打字错误和语法错误，我是在午餐时写的，所以我以后会回来解决这些问题。
你的顶级导航在IE7中被打破了，因为它没有正确定义什么去哪里以及如何去做。首先，您的徽标在文档中有点“浮动”，因为它在容器中绝对没有参考点，所以让我们从修复它开始

将
position:relative
添加到您的
#header wrapper
CSS规则中，以便我们可以在其边界内正确包含您的徽标：

#header-wrapper {
  position:relative;
}

接下来，我们必须重新排列您的徽标，以正确地坐在您的<代码>标头包装器< /代码> div的中间。以前您使用的是代码>空白：-57 px汽车0自动；<代码>对齐你的徽标，但是既然你已经完全定位了，你根本就不需要保证金（一个奇迹，它甚至还在工作），所以让我们做一些数学，绝对把你的徽标放在你的头包中间。
#social-share {
   position:absolute;
   right:0;
}

.ie7 #_atssh {
    position:relative;
}