Chrome, Safari가 표의 최대 너비를 무시 함
다음과 같은 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td>
<table style="width:100%; max-width:1000px; background:#000099;">
<tr>
<td>
001
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
문제는 Chrome과 Safari가 무시하고 "max-width:1000px"있다는 것입니다. 내 친구가 "display:block"내부 테이블 을 추가하여 방지 할 수 있음을 발견했으며 어떻게 든 작동합니다.
그래서 제가 알고 싶은 것은이 문제를 해결하는 다른 방법이 있습니까? 그리고 왜 이런 일이 발생 하는가?
최대 너비는 블록 요소에 적용됩니다 . <table>도 아닌 블록 도 인라인 . 충분히 모호합니까? ㅋ. 사용 display:block; max-width:1000px하고 잊어 버릴 수 있습니다 width:100%. Chrome과 Safari는 규칙을 따릅니다!
2017 년 5 월 편집 :이 댓글은 7 년 전에 작성되었습니다 (2010 년!). 나는 브라우저가 수년에 걸쳐 많은 변화를 겪었다 고 생각한다 (나는 더 이상 웹 디자인을하지 않는다). 최신 솔루션을 사용하는 것이 좋습니다.
나는 이것이 잠시 동안 그리고 작동하는 해결 방법으로 답변되었다는 것을 알고 있지만 max-width블록 요소에만 적용되고 사양이 아닌 소스를 인용 한다는 대답 은 완전히 잘못되었습니다.
사양 합니다 ( CSS 3 사양 명확하게 명시 CSS 내장 및 외부 크기 조정에 대한은 CSS이 규칙에 2.1 사양을 참조)
대체되지 않은 인라인 요소, 테이블 행 및 행 그룹을 제외한 모든 요소
이는 테이블 요소에 적용되어야 함을 의미합니다.
그것은 존중하지 않는 웹킷의 행동을 의미 max-width또는 min-width테이블 요소가 올바르지 않습니다.
여기에서 찾고있는 것은 다음과 같습니다.
table-layout: fixed
이 스타일을 테이블에 적용하면 테이블에 지정한 너비가 적용됩니다.
참고 : 이 스타일을 직접 적용하면 Chrome작동하지 않는 것처럼 보입니다. CSS / HTML파일에 스타일을 적용 하고 페이지를 새로 고쳐야합니다.
내부 테이블을 div로 감싸고 max-width를이 감싸는 div로 설정합니다.
나는 같은 문제가 있었다. 콘텐츠를 페이지 중앙에 배치하는 수단으로 표를 사용했지만 safari width:100%; max-width:1200px는 표에 적용한 스타일로 무시 했습니다. 테이블을 div로 래핑하고 div에서 자동으로 왼쪽 및 오른쪽 여백을 설정하면 페이지 중앙에 있고 Mac의 safari 및 firefox에서 최대 및 최소 너비 속성을 준수한다는 것을 배웠습니다. Windows에서 탐색기 또는 크롬을 아직 확인하지 않았습니다. 다음은 그 예입니다.
<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">
그런 다음 div 안에 테이블을 중첩했습니다.
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
나는 방금이 답변을 보았고 MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ) 에 따르면 max-width에 대한 호환성 표에 다음과 같이 말합니다.
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes) | Not supported | (Yes) | Not supported |
"[1] CSS 2.1은 명시 적으로 max-width의 동작을 정의되지 않은 상태로 남겨 둡니다. 따라서 모든 동작은 CSS2.1을 준수합니다. 최신 CSS 사양이이 동작을 정의 할 수 있으므로 웹 개발자는 지금 특정 동작에 의존해서는 안됩니다."
MDN에는 "fill-available"및 "fit-content"와 같은 멋진 기능이 있습니다. 사양이 안정화되고이 전면에 명시 될 때 기대할 몇 가지 사항이 있습니다.
미디어 쿼리 문제를 해결할 수있었습니다.
나는 교체했다
max-width: 360px
와
@media (min-width: 440px) {
width: 360px;
}
다음은 명확한 참조입니다. 10 시각적 서식 모델 세부 정보 (w3.org)
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
References given previously in this thread, erroneously read “table rows” as “table”. This one however, really says “table”. That's part of CSS2, but CSS3 refers to CSS2 for the basis of max-width.
So it's just undefined and browser are free to do what they wish and it's unsafe to rely on it.
참고URL : https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table
'developer tip' 카테고리의 다른 글
| 컨테이너가 메모리 제한을 초과하여 실행 중입니다. (0) | 2020.10.26 |
|---|---|
| '빈'생성자 또는 소멸자는 생성 된 생성자와 동일한 작업을 수행합니까? (0) | 2020.10.26 |
| ANTLR 3.3을 사용하십니까? (0) | 2020.10.26 |
| 리플렉션을 사용하여 선언 순서대로 속성 가져 오기 (0) | 2020.10.26 |
| 메인 콘텐츠 div를 CSS로 화면 높이를 채우는 방법 (0) | 2020.10.25 |