css - css ie7相対要素が含まれている要素の左側と外側に表示される

Question

ie7 デバッグを続行します。以前の投稿のおかげで、私は ie9 のツールと ie7 のデバッグに役立つツールを発見しました - 素晴らしい - Microsoft が便利なツールを開発できると誰が思ったでしょうか :)

とりあえず...

チュートリアルのスクリプトを使用して、上からスライドするパネルがあり、クリックしてパネルをスライドして開閉するタブがあります。パネルはすべて、左端に表示されるタブとそれを含む要素の外側に部分的に表示されるタブを除いて、期待どおりに機能しますが、右に整列する必要があります。要素は、それを含む 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;
  }