IE 7 용 테이블 셀 안의 div에서 올바르게 정렬 할 수 있습니까?

Float:right은 표 셀 내부의 div에 대해 IE에서 아무런 영향을 미치지 않는 것 같습니다. 또한 오른쪽에있는 레이어 내용을 정렬, 무엇보다도 바로 텍스트를 맞 춥니 다했지만,IE 7 용 테이블 셀 안의 div에서 올바르게 정렬 할 수 있습니까?

CSS 조각 IE 7의 성공이없는 한 :

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 

div.workload { 
    background-color: #E6D7E9; 
    text-align: right; 
    width: 14px; 
    float: right; 
}

HTML 코드 :

<td class="workloadcell"> 
    <div class="workload"> 
     1 
    </div> 
</td>

HTML과 CSS 모두 유효성 검사를하고 Firefox에서는 텍스트를 올바르게 정렬합니다. 당신이 복사/붙여 넣기 그것으로 전체 코드를 테스트하려는 경우, 여기 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> 
     <title>Table Test</title> 
     <style type="text/css"> 
td { 
    border: 1px solid black; 
} 


.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 



div.workload { 
    background-color: #E6D7E9; 
    text-align: right; 
    width: 14px; 
    float: right; 
} 
</style> 
    </head> 



<body> 
     <table> 
      <tr> 
       <td> 
        &nbsp; 
       </td> 
       <td colspan="4"> 
        <div> 
         2008 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        &nbsp; 
       </td> 
       <td> 
        <div> 
         Q1 
        </div> 
       </td> 
       <td> 
        <div> 
         Q2 
        </div> 
       </td> 
       <td> 
        <div> 
         Q3 
        </div> 
       </td> 
       <td> 
        <div> 
         Q4 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        workload forecast 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         1 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        actual workload 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
         </tr> 
     </table> 
    </body> 
</html>

는 (나는 제발 돈 클래스 선언은 여러 가지 요소에 대해 반복된다는 의미에서 최적하지 않는 CSS는 것을 알고 있지만, 이 문제와 관련이 없다면이 점에 대해 언급하지 마십시오.)

출처

2009-03-23 simon

그것은 당신이 (또는 방법 alexmeia 알)이 방식으로 작동합니다.

그러나 (여기는 IE 임) 헤더 Q1, Q2 등은 사용자가 요청한 14px보다 넓은 테이블 열을 밀어냅니다.

열은 정의한 14 픽셀 내에서 오른쪽 정렬되지만 IE에서는 div가 오른쪽으로 이동하지 않습니다.

, 당신은 28px 또는 변화에게 배경 중 하나의 색을 말할 폭을 만들 수 있습니다이를 설명하기 위해 (열이 실제로 넓은 14px보다 경우에도 사업부는 정의 된 14px 내에 머물고있다) 에서 내에 TD 및 DIV 차이를 보여.

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 

div.workload { 
    background-color: #E6EEE9; 
    text-align: right; 
    width: 14px; 
    float: right; 
}

을 IE의 용액 또는 헤더를 수용하도록 충분히 넓게 할 수있는 폭을 정의하지 않는 것 중 하나이다.

출처

2009-03-23 16:33:35 Traingamer

고마워요. 오늘 마감일을 맞이하면서 버그를 추적하도록 도와 줬습니다. –

div.workload에 대한 규칙을 선언 할 필요가 없습니다. 에만이 규칙과 모든 것이 잘 작동합니다 사용 :

td { 
    border: 1px solid black; 
    } 

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 20px; 
    height: 16px; 
    text-align: right; 
    }

출처

2009-03-23 16:05:23 alexmeia

감사합니다. 작동합니다. 그러나 너비가 14px에서 20px로 증가하기 때문에 작동하는 것 같습니다. 나는 패딩을 테이블 셀에 대해 0px로 지정 했으므로 14px 와이드 셀에서도 오른쪽 정렬을위한 충분한 공간이 있어야한다고 생각할 수 있습니다. 이것에 대한 설명이 있습니까? – simon

IE, 특히 SP1 이전 XP에서의 v6 및 이전 창에는 div 내에서 테이블을 혼합하고 해당 테이블 내에서 div를 만들 때 심각한 렌더링 문제가 있습니다. 특정 복잡성을 초과하면 & 중첩으로 공백/흰색 페이지가 나타날 수 있습니다.

특정 셀에서 텍스트 내용을 오른쪽 정렬해야하는 경우 div를 중첩하지 않고 td 태그에 클래스 선언을 추가하는 것이 좋습니다. 또한 IE8에서 시도해 볼 것을 제안하고 문제가 지속되는지 확인하십시오. 어떤 버전을 지원해야하는지 언급하지 않았습니다.

출처

2009-03-23 17:00:17 Tracker1

IE 7 용 테이블 셀 안의 div에서 올바르게 정렬 할 수 있습니까?

답변

관련 문제