CSS의 최소 높이 및 최소 너비 호환 브라우저 예제에 대한 자세한 설명

min-height와 min-width, 최소 높이와 최소 너비라는 두 가지 컨테이너 속성은 모두가 잘 알고 있을 것입니다.

먼저 최소 높이에 대해 이야기해 보겠습니다. 이건 쉬워 보이는데요.

아래 인터뷰 예시를 보세요:

<p style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">
    最小高度</p>

운영 차트는 ​​다음과 같습니다:

너무 일찍 기뻐하지 마세요. 너무 싫어하지만 직면해야 하는 IE6.0을 잊지 마세요. 밤낮으로 이렇게 대답합니다 당신:

누가 중국의 부자와 가난한 사람들을 주머니에 돈이 없게 만들 수 있습니까? 아마도 그렇게 말하면 안 될 것 같습니다. 사심없는 중국인들이 자신의 주머니를 국가에 무료로 기부하게 만든 사람이 누구라고 말해야합니까?

우리는 IE 브라우저를 업그레이드할 여유가 없습니다. 불쌍한 중국인들! ! !

너무 멀리 가네요...

문제는 반드시 해결되어야 합니다! 가난한 사람들은 자신만의 삶의 방식을 가지고 있습니다.

갑자기 머릿속에 떠오르는 현상!

Code:

<p style="border:5px solid #f00;height:120px;width:300px;padding:12px;">
    最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</p>

컨테이너에 높이를 지정할 때 표준 브라우저는 오버플로를 설정하지 않으면 콘텐츠가 초과되지만 컨테이너의 높이는 변경되지 않습니다. 이때, 높이를 조정하려면 이전 단계로 돌아갑니다. 물론 높이 속성을 제거할 수도 있습니다. 때로는 특정 공간을 차지하기 위해 최소 높이가 필요할 때가 있습니다. 그래서 min-height 속성이 도입되었습니다. 하지만 안타깝게도 ie6.0은 이를 지원하지 않습니다! !

그러나 IE6.0에서 동일한 코드를 테스트했을 때 결과는 다음과 같습니다.

정말 놀랍습니다! ! IE6에서는 콘텐츠가 높이를 초과하면 실제로 높이가 실패합니다! ! 이것이 바로 min-height가 달성하려는 목표가 아닌가요?

그래서 우리는 ie6.0을 위한 hack(_height:120px) 기술을 사용해야 합니다. 나는 핵을 사용하는 것을 절대적으로 싫어하기 때문에 여기서 "해야 한다"고 말합니다. 직접 체험해 보실 수 있습니다. 최대한 핵을 활용하는 것이 제 원칙입니다.

코드는 다음과 같습니다.

<p style="border:5px solid #f00;min-height:120px;_height:120px;width:300px;padding:12px;">
    最小高度</p>

테스트 결과 기대에 부합합니다.

드디어 길은 반쯤 지나갔습니다. 분명히 만족하지 못하는 마음만이 더 많은 것을 얻을 수 있습니다! 기술로 가는 길에 욕심을 부리지 마세요! !

이 효과를 얻으려면 최소 너비가 필요합니다.

먼저 테스트해 보겠습니다.

<p style="border:5px solid #f00;min-width:120px;;padding:12px;">
    最小宽度</p>

그러나 결과는 우리를 놀라게 했습니다. 모든 브라우저에서 작동하지 않았습니다.

무슨 일이 일어나고 있나요? 시험, 모두가 파업 중입니다! ! 곰곰이 생각해보면 이것이 작동하는 방식이 아니라는 것이 밝혀졌습니다. 기본적으로 컨테이너의 높이는 콘텐츠에 따라 결정되지만 너비는 그렇지 않습니다! 기본적으로 상위 컨테이너의 너비가 상속됩니다. 물론 디스플레이가 블록이라는 전제가 있다.

아, 그런 일이 일어났군요. 컨테이너의 기본 너비가 콘텐츠에 따라 결정되도록 해야 합니다.

이로부터 여러 가지 상황을 생각해 보았습니다.

1 display:inline 하지만 이 경우 테스트한 결과 min-width도 유효하지 않게 되는 문제가 있습니다. 오디션에 합격할 거예요! ! ;

2 그래서 우리는 display:inline-block 속성을 생각했습니다. 그러면 문제가 없을 것입니다. ? 해보자

코드는 다음과 같습니다

<p style="border:5px solid #f00;display:inline-block;min-width:220px;;padding:12px;">
    最小宽度</p>

테스트 결과 Firefox, Chrome, ie8.0에서 작동됩니다.

젠장, ie6이 아직도 작동하지 않아요! ! 그리고 누군가가 나서서 문제를 일으키면 ie7도 작동하지 않습니다. 아니요, 자세히 살펴보면 ie6과 ie7이 display:inline-block;을 구현하지 않는 것으로 나타났습니다.
코드를 수정하세요:

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;;padding:12px;">
    最小宽度</p>

먼저 ie7을 사용해 보세요. 완료되었습니다! ie6을 다시 시도해 보세요. 여전히 "악"입니다! ! 걱정하지 마세요. 최소한 너비가 콘텐츠에 의해 결정될 때만 작동하는 min-width의 사용법을 이해하고 있습니다. 컨텐츠를 더 많이 넣어보세요. 컨텐츠가 한도를 초과하면 생각보다 용량이 커지나요?

글쎄, 그렇죠. 그러나 작은 문제가 있습니다. 즉, 콘텐츠가 브라우저의 너비를 초과하면 여전히 줄 바꿈됩니다. 내버려둬! 먼저 ie6.0의 문제를 해결하세요.

곰곰이 생각해 보니 이제 원래 생각으로 돌아왔습니다. i6에만 문제가 있습니다. 처음에는 어떻게 해결됐나요? 아, ie6.0의 높이 자체가 min-height의 특성을 가지고 있군요. 너비도 마찬가지인가요? _width:220px을 추가해서 사용해 볼까요

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

결과가 심각해 매우 실망스럽습니다. 우리의 유일한 생각의 기차가 끊어졌습니다! 무엇을 해야 할까요? 무엇을 해야 할까요? ....."라인 브레이크!!??" 그럼 라인을 깨지 않게 해줄게! ! !

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

竟然可以了！加点内容！！！

竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！

3 position:absolute 嗯这个看起来也行。

<p style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</p>

加些内容：

依然可以，预期达到。

4 float:left 这种情况最常用。应该也行！

上代码：

<p style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</p>

 

同样加些内容：

预期达到！

我能想到就这几种情况，当然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。

위 내용은 CSS의 최소 높이 및 최소 너비 호환 브라우저 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!