호환성보기 / div height 5px의 차이 질문
흙이랑
요즘 아주 크로싱브라우저 웹표준화 때문에 미쳐버리겠는 늙은 웹디입니다.
서론 넘기고 격하게 본론으로 들어가자면
테스트 하면서 두줄의 div 를 설정했는데
연두색 라인은
div style=height:5px; background-color:#c6d53c;/div
파란색 라인은
div class=lineimg src=_image/line_blue.gif width=100% height=5 id=t_line //div
.line{
width:100%;
height:5px;
margin:0;
padding:0;
}
↓이건 호환성보기 전의 IE10 브라우저↓이건 호환성보기 후의 상태입니다.문제점 1 _ height 5px 라인이 백그라운드 칼라로 지정되었을 경우 호환성보기 전에는 멀쩡하게 잘 나오는데 호환성 보기 후에는 15px 로 보여지구요
문제점2 _ height 5px 의 라인이미지로 하단 버튼 마우스오버시 라인이미지가 변해야 하므로 꼭 이미지로 5px 라인을 만들어야 하는데 이미지로 불러올 경우에 저런식의 여유공간이 생겨버립니다.
문제점이 멀까요.
-
핑크빛입술
코딩으로 가능하지만 지금 코딩 구조상 갈아 엎으셔야 하니 쪼금 번거로운 작업이 될꺼같고요.
위에서도 말했듯이 스크립트로 처리하는게 편합니다. 그렇기 때문에 보더를 쓰라고 권해드린거고요. -
카이
ㅠ_ㅠ 제가 코딩 보단 디자인에 더 근접한 직업군이라...
요즘 제일 어려운게 시안작업보다 코딩하는거라지요.
추가질문!
라인 하단에 2개의 버튼으로 돌아가는데
마우스오버시에 버튼색상에 맞는 라인이 색상이 변하게 하려면 이미지 롤오버 말고
상단의 div 색상변화가 되는 코딩은???
전 솔직히 이미지 작업이 더 편하고 코딩작업이 더 어려운터라 저런식으로 div 를 짠거거든요ㅠ
(눌렀을때는 페이지전환 / 배경이미지, 라인이미지 색 변경됨) -
피리
단순 색상으로 이미지가 들어간 경우는 의미가 없는 것이 맞습니다. 위같은 상황에선 의미라기 보단 기능적인 측면으로 접근 하셔야 하고요. 그렇기 때문에 버튼을 눌렀을때 스크립트 단에서 이미지 바꿔치기로 하기보단 보더 색상을 바꾸는게 바람직하다고 생각이 들고요.
유지보수 측면으로 봤을 때 후에 버튼 색상이 바뀌면 보더처럼 들어간 부분의 이미지도 다시 저장해서 올려야 하는 불편한 작업이 될 수 있습니다. 하지만 보더로 처리를 한다면 스크립트 단에서 색상 코 -
이플
아 의미가 없지 않아요.
하단에 버튼을 클릭하면 라인이 색상이 변해야 하는데 (각 서브페이지별로 배경색상이랑 라인 색상이 달라져야 하구요)
헐헐 말씀해주신대로 display:block; 적용하니까 line 5px 이미지가 여유공간없이 사라졌네요.
ㅎ ㅏ.. 감사.. 아침부터 진짜 계속 미쳐버릴뻔 했는데 ㅠㅠ
흐읔 -
시원
왜 이런 의미없는 것을 이미지로 넣으셨나요
충분히 border를 사용하면 손쉽게 끝날텐데요.
일단 원인은 뭔지 아셔야 할거 같으니 설명드리자면 img는 inline요소기 때문에 모든 inline속성에는 기본적으로 줄간격이 들어가 있습니다. 그래서 이미지의 높이가 5px로 들어가는 것은 맞지만 그걸 감싸고 있는 div의 높이는 img높이 + 줄간격에 영향을 받기 때문에 img에 display:block;스타일을 넣어서 처리하시면 됩니다.
그리고 호환성