CSS

CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 123
미리보기 :  

IE6에서 line-height 적용시 이미지가 들어갔을때의 변화입니다.

 

line-height.gif

 

IE6에서 line-height 를 줬을경우 이미지가 들어가게되면 위처럼 텍스트가 상단으로 붙는현상이 있습니다.

아래는 테스트한 소스입니다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>웹미니 - CSS</title>
<style type="text/css">
body {color:444; font:12px "돋움", Dotum;}
h1 {color:#999; font-size:16px;}
h2 {font-size:14px;}
hr {display:none;}
.box {margin-top:10px; padding:10px; background:#f4f4f4;}
dl.line {padding-bottom:10px; line-height:20px;}
dl.line dt {float:left; width:40px;}
dl.line dd {float:left;}

dl.line_none {padding-bottom:10px;}
dl.line_none dt {float:left; width:40px;}
dl.line_none dd {float:left;}
</style>
</head>

<body>
<h1>웹미니 - CSS</h1>
<h2>IE6 에서 line-height가 있을때의 변화</h2>
<div class="box">
<h3>line-height 를 줬을경우</h3>
<dl class="line">
<dt>IE6</dt>
<dd>라인하이트를 줬을때 <img src="modules/document/tpl/icons/new.gif" alt="new" /></dd>
</dl>

<dl class="line">
<dt>IE6</dt>
<dd>라인하이트를 줬을때 (이미지가 없을때)</dd>
</dl>
</div>
<hr />
<div class="box">
<h3>line-height 를 주지 않았을 경우</h3>
<dl class="line_none">
<dt>IE6</dt>
<dd>라인하이트를 주지 않았을때 <img src="modules/document/tpl/icons/new.gif" alt="new" /></dd>
</dl>

<dl class="line_none">
<dt>IE6</dt>
<dd>라인하이트를 주지 않았을때 (이미지가 없을때)</dd>
</dl>
</div>
</body>
</html>

 

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/css/100174/6b4/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '2'

profile
뉴클리어 (103776)

2009.09.23 18:40:43

IE6 그냥 쓰질말자~

ie 8 을 써야징

처니리 (120644)

2009.11.11 14:48:43

그게 좋은듯 싶네요 ㅎㅎㅎ
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32640
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23178
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44341
43 repeat title: [ani]깜빡이는 표정빽짱구 2007-10-01   6763
42 IE에서 letter-spacing:-1px; 적용시 br 태그 버그 file [4] title: [ani]깜빡이는 표정빽짱구 2009-10-23   6754
41 CSS | 표(table) 에도 링크를 걸자 H1N1 2009-11-30   6682
40 컬러이미지를 흑백이미지로 바꾸기 title: [ani]깜빡이는 표정빽짱구 2005-11-28 12 6680
39 이미지전체 테두리 생기지않게하기 [1] H1N1 2009-11-30   6563
38 css로 첫번째 문자 크게 키우기 [1] H1N1 2009-11-30 1 6550
37 IE6에서 fixed 적용하기 title: [ani]깜빡이는 표정빽짱구 2010-11-24   6384
36 하이퍼링크에 마우스를 대면 아래위로 선이 생깁니다 H1N1 2009-11-30   6369
35 페이지전체를 흑백으로... [1] H1N1 2009-11-30   6247
34 best of best 링크에 각각 다른 효과 주기 title: [ani]깜빡이는 표정빽짱구 2006-01-01 35 6235
33 best of best 스크롤바 사용유무를 스타일로 정의하자 title: [ani]깜빡이는 표정빽짱구 2006-01-07 37 6156
32 css 단축속성 [3] H1N1 2009-11-30   6152
31 CSS메뉴 만들어 주는 프로그램 file [13] 웹준 2009-11-01 1 5983
30 input="file" 찾아보기 버튼 이미지로 바꾸는방법 file title: [ani]깜빡이는 표정빽짱구 2011-12-02   5972
29 아이폰에서 가로보기 했을때 글자가 커지는 문제 title: [ani]깜빡이는 표정빽짱구 2012-07-19   5689
28 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드 file [2] title: [ani]깜빡이는 표정빽짱구 2009-09-08   5678
27 익스6에서 :hover :focus 적용하기 title: [ani]깜빡이는 표정빽짱구 2011-06-15   5615
26 CSS메뉴를 손쉽게 만들 수 있는 사이트 [6] bumphy 2009-10-29 2 5177
25 css3로 돌아가는 애니메이션 효과주기? [2] title: [ani]깜빡이는 표정빽짱구 2011-12-06   5160
24 CSS3만든 애플키보드 title: [ani]깜빡이는 표정빽짱구 2011-11-15   5010