Firefox_Experience 교환 시 스타일 설정 폭이 이상한 현상

페이지에는 다음 구조의 테이블인 데이터 목록이 div 창에 배치되어 있습니다.

코드 복사 코드는 다음과 같습니다.

.... 데이터 나열....

스타일을 컨테이너로 설정합니다. ; margin:10px;}
그리드 스타일 설정 #grid {width:100%}

Firefox에서는 테스트 결과가 정상이며 컨테이너의 실제 너비는 100%를 초과합니다. Firefox가 여백을 계산하기 때문에 가로 스크롤 막대가 나타납니다. 너비를 입력하세요. 너비는 실제로 100%+20px>100%와 같습니다.
물론 div의 여백 정의를 제거하고 대신 본문의 패딩을 사용할 수 있습니다. 하지만 페이지 전체를 차지해야 하는 다른 콘텐츠가 있습니다.
그래서 과거에는 이 문제를 해결하기 위해 Firefox에서 div를 너비: 98%로 정의했습니다. 이렇게 하면 문제가 해결되는 것처럼 보였지만, 브라우저 창이 작아지면 Firefox에서는 98%+20px가 될 수도 있습니다. 100%보다 크면 가로 스크롤 막대가 나타납니다. 아마도 버그일지도 모르겠네요, 하하! 어쩌면 어떤 전문가는 그 이유를 알고 있을지도 모릅니다. 제가 직접 테스트하고 코드와 스크린샷을 게시했습니다.

테스트 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <div style="width:200px; overflow-y:auto; background:#efefef; border:2px solid #FF0000"> <div style="width:100%-20; margin:8px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <table style="width:100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333"> <tr> <td bgcolor="#FFFFFF">数据1</td> <td bgcolor="#FFFFFF">数据2</td> <td bgcolor="#FFFFFF">数据3</td> <td bgcolor="#FFFFFF">数据4</td> </tr> <tr> <td bgcolor="#FFFFFF">数据5</td> <td bgcolor="#FFFFFF">数据6</td> <td bgcolor="#FFFFFF">数据7</td> <td bgcolor="#FFFFFF">数据8</td> </tr> </table> </div> </div>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.