Firefox와 Opera가 디스플레이 내부의 최대 너비를 무시하는 이유 : 테이블 셀?
다음 코드는 Chrome 또는 IE에서 올바르게 표시됩니다 (이미지 너비는 200px). Firefox와 Opera에서는 max-width스타일이 완전히 무시됩니다. 왜 이런 일이 발생하고 좋은 해결 방법이 있습니까? 또한 대부분의 표준을 준수하는 방법은 무엇입니까?
노트
이 특정 상황에 대한 한 가지 가능한 해결 방법은로 설정 max-width하는 것 200px입니다. 그러나 이것은 다소 인위적인 예입니다. 가변 너비 컨테이너에 대한 전략을 찾고 있습니다.
<!doctype html>
<html>
<head>
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 100%; }
</style>
</head>
<body>
<div>
<img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
leo metus, aliquam eget convallis eget, molestie at massa.
</p>
</div>
</body>
</html>
[최신 정보]
아래 mVChr에서 언급했듯이 w3.org 사양 에는 요소에 max-width적용되지 않는 내용이 명시되어 inline있습니다. 을 (를) 사용해 보았지만 div img { max-width: 100%; display: block; }문제가 해결되지 않는 것 같습니다.
[최신 정보]
이 문제에 대한 해결책이 아직 없습니다. 그러나 다음 자바 스크립트 해킹을 사용하여 문제를 해결하고 있습니다. 기본적으로 위의 상황을 재현하고 브라우저가 max-width내에서 지원하는지 확인합니다 display: table-cell. (데이터 URI를 사용하면 추가 http 요청을 방지 할 수 있습니다. 아래는 3x3 bmp입니다.)
jQuery( function ( $ ) {
var img = $( "<img style='max-width:100%' src='" +
"data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
"AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
"/wAAAAAAwAAAAKAAAAA%3D" +
"'>" )
.appendTo(
$( "<div style='display:table-cell;width:1px;'></div>" )
.appendTo( "body" )
);
$.support.tableCellMaxWidth = img.width() == 1;
img.parent().remove();
});
w3.org 사양은 당신이 브라우저에서 일치하지 않는 행동을 얻을 수 있도록 최대 폭은 인라인 요소에 적용되지 않는다고 주장한다. 의도 한 결과는 확실하지 않지만 표준 인라인 대신 부동 소수점으로 및 태그 를 설정 div img { display:block }한 다음 정렬하면 결과를 얻을 수 있습니다 .imgp
당신이해야 할 것은 당신의 래퍼 사업부 (로 1 점을 추가하는 듯하는 것입니다 display: table-cell있는 다른 사업부 내부) display: table 와 table-layout: fixed . 따라서 Firefox와 Opera 모두 max-width규칙을 존중합니다 .
I got it working by using width: 100% instead of max-width: 100%.
Setting width: 100% does fix the problem, but it introduces another one. In WordPress you don't want to set width: 100% to an image. What if the image is medium-size with a width of 300px, what then? I've been using classes to set the width to 50% on medium-size, but what if the image is smaller? Then it will get stretched. In webkit browsers it works with width: auto; max-width: 100%; but since Firefox, Opera and IE ignore that... that's a huge problem.
This has become a very confusing topic...
Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.
That is why setting the max-width property of your image in pixels works:
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 200px; display:block;}
</style>
table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.
For a specific case, there's another workaround that I accidently found online: if you use display: table; + display: table-cell; to mimic a two (or more) column layout in a responsive site, try this instead: give the sidebar a widht of, say, 350px and the main content part of the site a width like width: calc(100% - 360px); . That did the trick for me, and the bonus was I needed a fixed width sidebar. I giess that will work with em's too.
Of course, this is js-dependent, but nowadays should be more than OK.
Have you tried adding a position property to your image? img {position:relative;}? It should conform to the parent element.
add float: left to the div css
I had the same problem. I solved it by doing this:
Tested in Opera and Fi
.classname {
max-width: 100%;
width: 100%;
display: table-cell !important;}
'Nice programing' 카테고리의 다른 글
| Bash 테스트의 복합 조건 그룹 (0) | 2020.11.10 |
|---|---|
| AngularJS의 요소에 대한 지시문 템플릿 고유 ID (0) | 2020.11.10 |
| navbar 상단의 Twitter-Bootstrap-2 로고 이미지 (0) | 2020.11.10 |
| C ++의 효율적인 스레드로부터 안전한 싱글 톤 (0) | 2020.11.10 |
| 바로 가기 키로 Chrome 콘솔을 지우는 방법은 무엇입니까? (0) | 2020.11.10 |