FF/Chrome의 이상한 테이블 맞춤 동작

FF3.5와 Chrome 10에서 일부 테이블이 예상과 같이 정렬되지 않는 이유를 설명하는 이상한 동작을 막 방금했습니다.FF/Chrome의 이상한 테이블 맞춤 동작

표에서 CSS 여백을 설정하면 (또는 일반 * 선택기를 통해) align 속성이 더 이상 작동하지 않습니다.

이제는 align이 더 이상 사용되지 않으며 컨테이너의 텍스트 정렬 스타일을 사용하여 테이블 정렬을 설정해야한다는 것을 알고 있습니다.하지만 포함 된 div 내에서 다양한 내용의 정렬이 필요할 때가 종종 있습니다.

IE는 (한 번) 일반 사람인 것처럼 보이고 여백 설정에 영향을받지 않습니다. 다음에서 확인하십시오. http://www.songtricks.com/AlignBug.html

다음 코드는 무엇입니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
</head> 

<body> 

     <table border="1" width="50%" align="center" style="margin:0px;"> 
     <tr> 
      <td>Table with style="margin:0px;"</td> 
     </tr> 
     </table> 

     <table border="1" width="50%" align="center"> 
     <tr> 
      <td>Table with no style</td> 
     </tr> 
     </table> 

</body> 
</html>

출처

2011-04-20 Stephen

어떤 종류의 대답을 기대합니까? 'align = "center"'** 및 **'margin : 0'을 설정할 때 논리적입니까? – Kobi

야. 스타일은 읽은 순서대로 적용됩니다. 먼저 센터를 설정 한 다음 마진을 설정합니다 (0px). IE는 여백에 대해 이야기 할 때 (우리가하는 것처럼) 놀고 있습니다. 다른 사람들을 탓하지 마십시오. – Alfabravo

빠른 답변을 보내 주셔서 감사합니다. @ 코비, 왜 조합이 비논리적입니까? 첫 번째 정렬 컨텍스트를 알지 못하면 여백은 의미가 없습니다. @ Alfabravo, 나는 정렬과 스타일 속성을 바꾸려고했지만 같은 결과가 나왔다. – Stephen

임 확실하지 정렬이 작품 속성 그러나 당신이 그것을 영향을하지 않는 것 스타일에 여백 - 상단 또는 하단 여백을 적용 할 때처럼 보이는 방법. 왼쪽 및 오른쪽 여백을 변경 한 경우에만이 버그가 발생합니다. 내 생각 엔 align 속성은 margin : 0 auto와 동일하게 동작한다는 것이다. 왼쪽 및 오른쪽 여백에 auto를 추가하면 원하는 결과를 얻을 수 있습니다.

<table border="1" width="50%" style="margin:0px auto;"> 
    <tr> 
     <td>Table with style="margin:0px;"</td> 
    </tr> 
</table>

출처

2011-04-20 20:56:51 locrizak

감사합니다. locrizak이 맞습니다. 이 경우 align = "center"속성은 더 이상 필요하지 않습니다. 어쩌면 내부적으로 동일한 루틴에 매핑 될 수 있으며 그 때문에 내가 갈등을 겪고있는 것입니다. 나는 self-aligning content를 원할 때마다 align 속성을 사용하는 것을 멈추고 자동 여백을 대신 사용해야한다고 생각한다. – Stephen

FF/Chrome의 이상한 테이블 맞춤 동작

답변

관련 문제