Question

我在互联网浏览器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;
}

这是正确的看法：

enter image description here

这是不正确的外观（ie7,6）

enter image description here

忽略css3相关的东西，问题是在ie 7,6中所有内容都被挤到顶部，搜索栏出现在中间而不是右边。

Answer 1

你的顶级导航在IE7中崩溃了，因为没有正确定义什么地方和方式。首先，您的徽标在文档中是“浮动”的，因为它的位置绝对没有容器中的参考点，所以让我们先修复它;

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

#header-wrapper {
  position:relative;
}

接下来，我们必须重新安排您的徽标，以正确地坐在#header-wrapper div的中间。以前你使用margin: -57px auto 0 auto;来对齐你的徽标，但是由于你已经完全定位它，你根本不需要边距（这甚至可以起作用的奇迹），所以让我们做一些数学来绝对定位你的标题包装器div中间的徽标：

首先，我们消除该保证金声明并将其替换为以下内容：

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

现在，我们在这做了什么？首先，我们将您的徽标从左侧向前推50％，然后以负余量将其向后推~102.5像素。我们为什么这样做？因为left声明会将元素的宽度添加到计算中，所以推送实际上意味着“元素的左边+宽度的50％”，因此，我们使用负边距来补偿宽度{ {1}}。 Here是对此过程的更好解释。

在我列出的两项更改完成后，您会发现徽标位于幻灯片显示区域后面，这是由ie7 z-index bug引起的，修复实际上非常简单：

50% - width/2

我们通过将标题部分定义为header { position:relative; z-index:999; /* ie7 z-index bug fix */ }并将其设置为比幻灯片显示区域更高position:relative来修复此问题，这样您的徽标就会在幻灯片上显示。

现在要修改搜索栏，使其自定位到左侧而不是右侧，我们必须将z-index部分定义为#social-share，然后使用position:absolute将其推到右侧，为什么？因为IE7将您的搜索栏定位在使用负边距被推到顶部的right:0旁边，因此不会按预期从流中删除（很惊讶它实际上在现代浏览器中有效）。因此，将您的#social-share部分定义为绝对部分，问题就解决了：

#social-share

最后修复是一个条件类，我们将用它来定位您的#social-share { position:absolute; right:0; } #_atssh标记，以便将其相对于您的文档定位。 IE7没有考虑到因为它是绝对定位的，因此移除了长空间。

我们可以利用你的<div>标签添加到你的<html>标签中的条件类，并单独使用目标IE7修复：

.ie7 #_atssh {
    position:relative;
}

注意：可能有十亿错别字和语法错误，我在午餐时写了这些错误，所以我将来会回到这个并修复它们。

Answer 2

看起来你需要一个clearfix：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

将此添加到包含浮动元素的元素

Answer 3

根据我所看到的内容（抱歉，没有IE6或7可用），您可以使用position和top而不是像这样使用负边距来解决此问题：

从margin: -57px 0 0 0;移除#logo为top: 0px;。由于您已经在使用position: absolute;，因此应将徽标放在屏幕的顶部边缘。
从margin: -47px 0 0 0;移除#social-share，然后添加position: relative; top: -47px;

可能还需要包括JKirchartz提到的正确的clear或“clearfix”。

Answer 4

将CSS属性zoom: 1添加到<div id="social-share">，header-wrapper或inner-border。

我喜欢quirks模式如何解释hasLayout的问题，这是一个IE6＆amp; IE7具体问题：http://www.satzansatz.de/cssd/onhavinglayout.html。

Internet Explorer中的外观不正确

HTML

CSS

4 个答案: