본문 바로가기

DIV

(3)
인터넷 익스플로러(IE) 에서 이미지를 둘러싼 태그의 여백에 영향을 주는 요소 예를들어 아래와 같은 HTML 코드가 있다고 할 때, DOCTYPE 이 세팅된 경우라면 생각하는 대로 표시되는데 DOCTYPE 이 없다면..?Box 모델을 생각해 볼때, padding 과 margin 을 고려해 볼 수 있는데..padding 은 IE 와 Chrome 등에서 유효하지만, margin 의 경우 상하는 값을 주어도 적용이 되지 않고 좌우만 수치 조정이 가능.다음으로 생각해 볼 것은 line-height.. 그런데도 이미지 상하에 여백이 발생한다면 font-size 를 조정해 보세요.물론, 이미지에는 적용할 필요 없고, 이미지를 감싸는 태그에 적용하면 됩니다. .........
이미지 위에 레이어를 올렸는데, 브라우저 폭이 변할때 같이 변하지 않거나 레이아웃에 가로줄이 생길때.. o 박스 안에 이미지와 절대좌표 박스가 들어간 형태에서 호환성 보기를 하면 레이아웃에 금이 가는 현상 다른 웹브라우저나, IE 일반 모드에서는 정상인데.. 유독 IE 호환성 보기에서 레이아웃이 깨짐. ... 이때는.. img 와 absolute 인 div 사이에 공간이 없게 해야 하는군요. ... 그런데, 브라우저 폭이 변할때 absolute 로 잡은 영역이 같이 변하지 않아서 레이아웃이 깨진다면.. 아래와 같이 relative 영역에 이미지를 가져다 사용하는 것이 필요. ...
position CSS 는 table 태그류와는 맞지 않고 div 쪽으로는 잘 맞네요 블럭 단위로 CSS 를 사용하여 좌표에 대해서 조정이 필요할때, 이를테면 화면에서 B 블럭이 A 블럭 안에서 일정 거리를 두고 표시되어야 할때.. 최근의 HTML 태그는 div 를 주로 사용하니까 문제는 없고요. table 태그가 들어간 이전 HTML 태그들과 섞여 있는 화면이라면.. table 의 td 안에 div 로 B 블럭을 구현하려고 할 거에요. 이게 IE 에서는 잘 맞아 들어가는데, IE 이외의 웹브라우저에서는 소용없는 짓이죠. ㅠ.ㅠ 그래서 이럴때는.. table 태그 안에 div 로 A 블럭을 만들고 그 안에 B 블럭을 만들면서.. A 블럭에는 position:relative 를, B 블럭에는 position:abolute 를 해 주어야 하는 거죠. .. 상기와 같은 코드로는 IE 에서는 제..