1

继续 ie7 调试。感谢以前的帖子，我发现了 ie9 中的工具以及它们帮助调试 ie7 的能力 - 太棒了 - 谁曾认为微软可以开发一个有用的工具 :)

反正...

使用教程中的脚本，我有一个面板，它从顶部滑入，并有一个标签可以单击以滑动面板打开和关闭。除了出现在最左侧和部分在其包含元素之外的选项卡之外，该面板都按预期工作，而它应该在右侧对齐。该元素相对于它包含的 div 定位并向右浮动。

包含的 div 出现在它应该在页面上执行的位置。这是HTML：

<div class="tab">

<ul class="login">
 <li class="left">
  &nbsp; 
 </li>
 <li>
  Hello Guest! 
 </li>
 <li class="sep">

| 登录 | 注册关闭面板   

</div>

这是与元素相关的CSS：

.tab {
background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 12px;
text-align: center;
}

.tab ul.login li.left {
background: url(../images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(../images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(../images/tab_m.png) repeat-x 0 0;
}

对于 ie7 定位错误，我应该注意什么，以便我可以尝试解决问题区域。

谢谢

更新：我在下面尝试了一个建议的答案，但还没有成功。但是我没有注意到父包装器不正确。它们被设置为 width:100% 但它们从页面左侧开始大约 1/4，就好像它们有一个边距： HTML 下面：

   <DIV id=panel>
     <DIV class="content clearfix">
       <DIV class=left>
        CONTENT
       </DIV>
      <DIV class=left><!-- Login Form -->
      CONTENT
      </DIV>
      <DIV class="left right"><!-- Register Form -->
      CONTENT
      </DIV>
    </DIV>
    </DIV>
    <!-- /login -->
    <!-- The tab on top -->
    <DIV id=wrapper1>
      <DIV class=tab>
        <UL class=login>
           <LI class=left>&nbsp; </LI>
            <LI>Hello Guest! </LI>
            <LI class=sep>| </LI>
            <LI id=toggle>CONTENT</LI>
            <LI class=right>&nbsp; </LI>
       </UL>
     </DIV>
     </DIV>

整个面板从左侧离开，而它应该跨越整个页面，页面实际上需要滚动到右侧才能看到整个元素。该面板紧跟在标签之后

顶部面板等的 CSS：

   #toppanel {
   position: absolute;   /*Panel will overlap  content */
   /*position: relative;*/   /*Panel will "push" the content down */
   top: 0;
   width: 100%;
   z-index: 999;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
  }

   #panel {
width: 100%;
height: 250px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
  }
4

1 回答 1

1

给你的标签一个left:0px和一个包装。

IE 7 设置 left:0px 默认值，如果您周围没有另一个相对容器，它会设置在最左侧。

于 2012-04-20T08:07:09.157 回答