我在 Internet Explorer 7,6 等中的外观不正确。当我将 float: right; 添加到 #social-share div 标签时，它开始了。我尝试设置 display: inline-block; 和 clear: both; 但对我没有任何效果。
您可以 see the issue live .这是我的代码:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<a href="index.php" alt="Bryuvers Majas Lapa" id="logo"></a>
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
这是正确的样子:
这是不正确的样子(ie7、6)
忽略 css3 相关的东西，问题是在 ie 7,6 中所有东西都被挤到顶部，搜索栏出现在中间而不是右边。
最佳答案
您的顶级导航在 IE7 中崩溃了，因为它没有正确定义什么去哪里以及如何去。首先，您的 Logo 有点“漂浮”在您的文档中，因为它的位置绝对没有在其容器中有任何引用点，所以让我们从解决这个问题开始；
添加position:relative给你的#header-wrapper CSS 规则，以便我们可以在其边界内正确包含您的 Logo :
#header-wrapper {
position:relative;
}
接下来，我们必须重新排列您的 Logo ，使其正确地位于您的 #header-wrapper 的中间。分区以前您使用的是 margin: -57px auto 0 auto;对齐您的 Logo ，但由于您已经绝对定位它，所以您根本不需要边距(它甚至可以工作的奇迹)，所以让我们做一些数学运算以将您的 Logo 绝对定位在标题包装器 div 的中间:
首先，我们删除 margin 声明并将其替换为以下内容:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
现在，我们在这里做了什么？首先，我们将您的 Logo 从左侧推到 50%，然后以负边距将其推回 -102.5 像素。我们为什么这样做？因为left声明将元素的宽度添加到计算中，因此推送实际上意味着“向左 50% + 元素的宽度”，因此，我们使用负边距来补偿宽度，50% - width/2 . Here是对过程的更好解释。
完成我列出的两个更改后，您会发现 Logo 位于幻灯片区域后面，这是由于 ie7 z-index bug修复实际上非常简单:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
我们通过将标题部分定义为 position:relative 来修复它并给它一个更高的 z-index比你的幻灯片区域，这样你的标志就会在你的幻灯片上。
现在要修复您的搜索栏，将其定位在左侧而不是右侧，我们必须定义您的 #social-share部分为 position:absolute然后使用 right:0 将其向右推， 为什么？因为 IE7 将您的搜索栏定位在 #social-share 旁边谁被使用负边距推到顶部，因此没有按预期从流中删除(很惊讶它实际上在现代浏览器中工作)。所以，定义你的 #social-share节为绝对，问题已解决:
#social-share {
position:absolute;
right:0;
}
最后的修复是一个条件类，我们将使用它来定位您的 #_atssh <div>标记以相对于您的文档定位它。 IE7 没有考虑它，因为它是绝对定位的，因此删除了长空格。
我们可以利用您添加到 <html> 中的条件类通过样板标记并单独针对 IE7 进行修复:
.ie7 #_atssh {
position:relative;
}
注意:可能有十亿个拼写错误和语法错误，我是在午餐时写的，所以我会在以后回来解决这个问题并修复它们。
关于html - Internet Explorer 中的外观不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9503869/