Question

除ie6和ie7之外的所有浏览器都可以正常工作但我只关心ie7这个问题。

我正在尝试让导航栏粘在浏览器窗口的底部，并在滚动页面时保持原位

导航条形码

<div id="quickcontactbar" style="align: center;">
    <p class="leftp">
        <a><img src="/images/searchbutton.png" style="border-right: 1px solid #888;"></a>
        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=micrimdefense&link_color=ffffff" style="width:165px; height:20px;"></iframe>
        <g:plusone size="medium" count="false"></g:plusone>
        <iframe src="http://www.facebook.com/plugins/like.php?app_id=140269382715400&amp;href&amp;send=false&amp;layout=button_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21;" scrolling="no" frameborder="0" style="border-right: 1px solid #888; overflow:hidden; width:60px; height:21px;padding-left: 3px;" allowTransparency="true"></iframe>
        <span style="padding-left: 75px;"><img src="/images/phonenumber.png" style="border-right: 1px solid #888;border-left: 1px solid #888;"></span>
        <img src="/images/copyright.png">
    </p>
</div>

这是导航栏的css

#quickcontactbar {
   position: fixed;
   width: 808px;
   height: 36px;
   bottom:0px;
   left:0px;
   right:0px;
   background: url(images/bgquickbar.png);
   border-bottom: 1px solid #ffffff;
   margin: 0 auto;
   display:block;
   text-align: center;
   }

#quickcontactbar .leftp {
   color: #e3fe54;
   margin: 5px;
   font-weight: bolder;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 16px;
   padding-top: 7px;
   padding-left: 5px;
   height:16px;
   }

我怀疑它与left:0px和right:0px有关，但当我删除它时，它会在所有其他浏览器中断开，并将导航栏从屏幕移到右侧。

感谢您的帮助，Stack Overflow晃动

另外，我用

强制标准模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

在ie7中显示问题...

img193.imageshack.us/img193/2569/screenshot20110802at427.png

它应该像chrome / ie8 / safari ......

一样显示

img402.imageshack.us/img402/231/screenshot20110802at428.png

Answer 1

从此处删除style="align: center;" ...

<div id="quickcontactbar" style="align: center;">

进入这个......

<div id="quickcontactbar">

AFAIK，CSS中没有align:这样的内容，您已经将text-align: center;应用于CSS中的<div>。

还使用W3C Validator验证您的代码。

修改

在这里查看CSS的一部分......

#quickcontactbar { width: 808px; left:0px; right:0px; }

宽度与左/右定位持续冲突。左边的和右边的0px怎么样，808px宽呢？当您的浏览器窗口宽度为1000像素时，左/右定位div左边缘的0像素和右边缘的0像素，这将迫使<div>宽度为1000像素。这就是应该如何工作的。现在，浏览器如何协调它与声明它只能是808像素宽？

编辑2：

使用808像素宽的包装<div>水平居中的所有内容。

http://jsfiddle.net/8rvQ3/4/

<div id="wrapper"> <div id="quickcontactbar"> <p class="leftp"> ..... </p> </div> </div> #wrapper { position: relative; width: 808px; margin: 0 auto; } #quickcontactbar { position: fixed; width: 808px; height: 36px; bottom: 0; background: url(images/bgquickbar.png); border-bottom: 1px solid #ffffff; display:block; text-align: center; } #quickcontactbar .leftp { color: #e3fe54; margin: 5px; font-weight: bolder; font-family: Verdana, Helvetica, sans-serif; font-size: 16px; padding-top: 7px; padding-left: 5px; height: 16px; }

Answer 2

当你删除左边时会发生什么：0和右边：0？

另一种方法是设置左：50％，右移：0并设置margin-left：-404px;

在7中无法获得div到水平对齐

2 个答案: