Question

继续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定位错误，以便我可以尝试在问题区域进行磨练。

由于

更新：我在下面尝试了一个建议的答案，但还没有成功。但是我没注意到父包装器不正确。它们被设置为宽度：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;
  }

Answer 1

为您的标签提供left:0px和包装。

IE 7设置左：0px默认值，如果你周围没有另一个相对容器，则它设置在最左边。

css ie7相对元素出现在包含元素的左侧和外侧

1 个答案: