jQuery를 UI 버튼 내부의 테이블 셀 - 렌더링 문제

Question

나는 특히이 예에서, jQuery를 버튼을 사용하고 있습니다 : 나는 각 행에 대해이 태그는 incide 테이블을 TD을 배치 한

http://jqueryui.com/button/#splitbutton

:

<div> 
    <button id="possible-actions">Action</button> 
</div> 
<ul> 
    <li><a href="#">Reopen</a></li> 
    <li><a href="#">Close</a></li> 
    <li><a href="#">Delete</a></li> 
    <li><a href="#">Move...</a></li> 
</ul> 

물론 자바 스크립트를 수정했습니다. 그러나 현재 Internet Explorer 8에서 렌더링 문제로 고심하고 있습니다. 다른 셀의 내용이 버그로 렌더링됩니다. 예를 들어 행의 높이가 높고 일부 셀의 내용이 셀 외부로 렌더링됩니다. 그러나 마우스를 행 위로 가져 가면 IE가 다시 그리기/새로 고침되고 행이 고정 된 것처럼 보입니다.

마우스 오버 핸들러 나 다른 이벤트가 없습니다. 일반 테이블 +이 jQuery UI 버튼. td 안에 블록 요소를 사용하고 있거나 페이지가로드되고 브라우저가 렌더링 테이블에 문제가있는 경우이 버튼을 동적으로 생성하기 때문에 이런 일이 발생할 수 있는지 궁금합니다.

참고 : Google 크롬 & FF에는이 문제가 없습니다. 고정

<span style="display: inline-block"> 
    <button id="possible-actions">Action</button> 
</span> 
<ul style="display: none"> 
    <li><a href="#">Reopen</a></li> 
    <li><a href="#">Close</a></li> 
    <li><a href="#">Delete</a></li> 
    <li><a href="#">Move...</a></li> 
</ul> 

문제 :

Answer 1

에 마크 업을 변경. 내가 사용하는 스타일은 다음과 같습니다

• 디스플레이 : 인라인 블록 - 좀 너비/높이가
• 디스플레이를 dimmentions 제어하지해야하기 때문에 : 없음 - 버튼을 클릭했을 때 나는 수요에 & 쇼 메뉴를 만들 수 있기 때문에