2012-01-11 3 views
6

두 개의 열이있는 테이블이 있습니다. 왼쪽 열에는 내용과 유일한 부유 요소 인 widget div가 있습니다. 이 div는 페이지가로드 될 때 페이지의 맨 아래로 이동하여 테이블의 오른쪽 열을 가져옵니다. 때로는 뭔가를 움직이면 뒤로 움직이면서 완전히 무작위로 보인다.Div가 IE에서 이동합니다.

IE peek-a-boo 버그와 비슷하지만별로 보이지 않습니다. 나는 position: relative;을 시도했지만 작동하지 않습니다. 어떤 아이디어?

다음은 HTML입니다 :

<table class="formTable"> 
    <tr> 
     <td class="content_main"> 
      <h1>header</h1> 
      <table> 
       <tr> 
        <td>Content here</td> 
        <td>Content here</td> 
       </tr> 
      </table> 

      <div style="float: left; clear: none; display: block; color: rgb(68, 68, 68); font-weight: normal; font-family: &quot;Trebuchet MS&quot;,&quot;Verdana&quot;,sans-serif; font-size: 14px; line-height: 18px; text-decoration: none; text-align: left; margin: 0px; padding: 10px; height: auto; width: auto; background-image: none; background-color: white; border: 10px solid rgb(204, 204, 204); overflow: auto;" id="widget"> 
       Content 
      </div> 
     </td> 
     <td class="content_right"> 
      <ul> 
       <li>List</li> 
       <li>List</li> 
      </ul> 
     </td> 
    </tr> 
</table> 

그리고 여기에 테이블에 대한 CSS의 :

.content_right { 
    padding-left: 20px; 
    padding-top: 15px; 
    width: 393px; 
} 
.content_main { 
    padding-top: 15px; 
    width: 500px; 
} 
+0

[yui2 reset] (http://developer.yahoo.com/yui/reset/)와 같은 CSS 재설정 스크립트를 사용해보세요 –

+0

재생할 수 없습니다 .. [이 바이올린]을 바꿀 수 있습니까 (http : // jsfiddle.net/8wytE/) 당신이 경험 한 것을 재현 하시겠습니까? 콘텐츠에 뭔가가있을 수 있습니까? –

+0

예를 들어 어떤 docType을 사용하고 있습니까? 재현 할 수 없습니다. – 8bitjunkie

답변

1

나를 위해 잘 작동. div를 사용하는 방법을 알고 있다면 테이블을 피하십시오.

0
 <h1>header</h1> 
     <article>Content here</article> 
     <article>Content here</article> 

     <div id="widget"> 
      Content 
     </div> 
     <ul> 
      <li>List</li> 
      <li>List</li> 
     </ul> 

이렇게 HTML을 시험해보고 인라인 방울이 아닌 CSS 스타일 시트를 사용하십시오. 표준은 이유가있다. 지금까지는 모든 최신 브라우저가이를 지원하기 때문에 엉뚱한 마크 업과 '버그'가 필요 없습니다. 자료를 읽으려면 http://www.abookapart.com/을 참조하십시오.

관련 문제