IE7 기본값은 100% 너비로 요소를 기본합니다
-
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;}