IE6 브라우저에서 div 높이 설정 방법

1930 단어
IE6 브라우저에서 div 높이를 설정하는 방법:
건의: 가능한 한 손으로 쓰는 코드는 학습 효율과 깊이를 효과적으로 높일 수 있다.
IE6 브라우저에서, 우리는div의 높이를 마음대로 설정할 수 없습니다. IE6 브라우저에서div의 높이는 글꼴 크기와 연결된 것 같습니다. 글꼴의 크기를 설정하지 않으면 12px보다 작은 자까지 설정할 수 없습니다.예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
.mytest{
  width:100px;
  height:5px;
  border:1px solid red;
}
</style>
</head>
<body>
<div class="mytest"></div> 
</body>
</html>

이상은 코드가 표준 브라우저에서는 정상이지만 IE6 브라우저에서는 div 높이를 5px로 설정할 수 없습니다. 높이는 여전히 12px입니다.해결 방법은div의 글꼴 크기를 0px로 설정하면 더 작은 높이를 설정할 수 있지만 최소 높이는 2px까지만 설정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
.mytest{
  width:100px;
  height:1px;
  border:1px solid red;
  font-size:0px;
}
</style>
</head>
<body>
<div class="mytest"></div> 
</body>
</html>

IE6에서 div의 높이를 마음대로 설정할 수 있도록 하려면 오버플로우:hidden을 추가해야 합니다.예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css">
.mytest{
  width:100px;
  height:1px;
  border:1px solid red;
  font-size:0px;
  overflow:hidden;
}
</style>
</head>
<body>
<div class="mytest"></div> 
</body>
</html>

상기 코드는div의 높이를 마음대로 설정할 수 있습니다.
원래 주소:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/415.html

좋은 웹페이지 즐겨찾기