IE7 기본값은 100% 너비로 요소를 기본합니다

StackOverflow https://stackoverflow.com/questions/618507

  •  03-07-2019
  •  | 
  •  

문제

나는 내가 작업하는 웹 응용 프로그램에 정말 실망스러운 문제가 있습니다 (원래 쓰지 않았습니다). 레이아웃에 프레임을 충분히 사용합니다. 내가 가지고있는 문제는 CSS 기본값을 통해 배경색과 테두리가있는 모든 요소가 100% 너비로 설정되어 있다는 것입니다. 방금 div 요소, 단락 요소 등을 테스트했습니다.

스타일 시트를 완전히 제거한 다음 테스트 한 후 같은 문제가 있었으므로 문제를 일으키는 스타일 시트가 아닙니다.

코드가 상충되지 않은지 확인하기 위해 빠른 테스트를 작성하고 동일한 Doctype 및 XMLN을 우리와 사용했습니다. 같은 문제가 발생합니다. 예제 코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

어떤 아이디어?

도움이 되었습니까?

해결책

나는 이것이 HTML/CSS에 필요하다고 생각합니다. 블록 요소는 멈출 것이없는 한 전체 너비를 확장합니다.

(FF는 동일한 동작을 가지고 있습니다.)

다른 팁

요소가 부모와 함께 가득 찬 배경이나 테두리를 가지고 있기 때문이 아닙니다. 블록 요소이기 때문입니다. 배경이나 경계는 요소가 얼마나 큰지 알 수있게합니다.

기본 너비는 실제로 "100%"가 아니라 "자동"입니다. 실질적인 차이점은 국경을 포함한 요소가 너비의 100%를 사용한다는 것입니다. 너비는 너비의 100%가되는 것을 제외하고 너비를 제외하고 (부모보다 테두리를 포함한 너비를 더 넓게 만듭니다)

요소가 사용 가능한 너비를 사용하지 않으려면 플로팅 요소로 만들 수 있습니다. 그러면 내용에 따라 조정됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

Richard와 Beefturkey가 말했듯이 Divs는 블록 요소이며 브라우저의 너비를 채 웁니다.

스팬과 같은 인라인 요소를 사용할 수 있습니다.

<span id="test">
    Test information!
</span>

또는 DIV에 약간의 스타일을 추가하여 인라인으로 강제로

div#test { display: inline; }

블록이기 때문에 기본적으로 기본값 (부모 규모)으로 기본값을받지 않습니까? 항상 인라인으로 디스플레이를 변경하려고 시도 할 수 있습니다 : #test {display : inline;}

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top