다중 입력 필드이 테이블에

Question

봐 :

이

<div style="position: absolute; right:0; top:0; width:100px;"> 
    <table style="width: 100%; border-bottom: white 1px solid"> 
     <tr> 
     <td>X:</td> 
     <td><input type="text" style="width:100%"/></td> 
     <td>Y:</td> 
     <td><input type="text" style="width:100%"/></td> 
     <td>Z:</td> 
     <td><input type="text" style="width:100%"/></td> 
     </tr> 
    </table> 
</div> 

http://jsfiddle.net/MDLMz/2/

입력 필드 폭이 파이어 폭스에서 동일하지만, 맞다 중간 하나 크롬에서 작다.

나는 이런 일이 전혀 일어나지 않는다는 것을 전혀 모른다.

Chrome에서이 문제를 해결할 수있는 해결책이 있습니까?

Answer 1

나는 이것을 풀어 봤지만 대답하지 말아야한다. 누군가가이 대답을 유용하게 사용할 수 있습니다.

문제는 웹킷 렌더링 순서에 관한 것입니다. 너비를 auto로두면 첫 번째로 렌더링 된 표 셀이 1보다 큽니다.

파이어 폭스와 오페라는 사용 가능한 너비를 고르게 분배하는 것보다 전체 테이블을 구문 분석합니다. 내 생각에 올바른 방법입니다.

크롬 수정은 표의 모든 요소에 백분율을 사용하는 것입니다. 자동 값을 그대로 두지 마십시오.

<table style="width: 100%"> 
     <tr> 
     <td style="width:10%">X:</td> 
     <td><input type="text" style="width:90%"/></td> 
     </tr> 
</table> 

이제 테이블을 포기하거나 절대 픽셀 크기를 사용할 필요가 없습니다.