아티클

[개발일지] 버그 리포트

2011-01-17 11:48:04
마크업 개발을 진행하다보면, 수많은 버그들을 만나게 됩니다. 대부분 IE에서 발생하는 버그이고 해결이 가능한것도 그렇지 못한것도 있습니다. 네이버me를 진행하면서도 많은 버그를 접하게 되었고 그 중에서도 조금은 생소했던 버그를 정리해보았습니다.

버그1. 

이 버그는 네이버me의 커뮤니케이터에서의 본문 입력창에서 발생했던 버그입니다.

 8.gif  

  이슈

  <textarea>에서 글자 입력 시 커서 위치가 변경됩니다.
  이상 환경   IE
  이상 화면

  텍스트 입력 전 커서 위치
  상단 라인에 1px 정도 차이가 나게 위치하고 있는 것을 알 수 있습니다.
  textarea.gif

  텍스트 입력 후 커서 위치
  textarea에 행간이 지정되어 있을 경우, 커서 위치가 변경됩니다.

  textarea2.gif

  정상 화면

  다른 브라우저의 경우는 커서의 크기가 애초에 행간의 크기만큼 잡히기 때문에 문제가 되지 않습니다.
  크롬에서의 텍스트 입력 전 커서 위치

  textarea3.gif 
  크롬에서의 텍스트 입력 후 커서 위치

  textarea4.gif

  해결 방안   해당 이슈에 대해 뚜렷한 대안책을 찾지 못했고 IE 브라우저 이슈로 판단하여 해결불가 처리하였습니다.

 

버그2.

이 버그는 네이버me의 커뮤니케이터 받는 사람 입력창에서 발생했던 버그입니다.
9.gif  

  이슈   텍스트 입력창(<input type="text">의 커서를 끝으로 옮기면 커서가 보이지 않습니다.
  이상 환경   IE
  이상 화면

   텍스트 입력창에 포커스를 두고
  1.gif 

  'End'키를 눌러 커서를 끝으로 이동시키면 아래 그림과 같이 커서가 보이지 않습니다.
  2.gif  

  정상 화면

  다른 브라우저에서는 커서가 잘 보입니다.
  3.gif

  해결 방안   텍스트 입력창의 오른쪽 패딩값이 0일때 발생하는 문제로 오른쪽 패딩값을 1이상 지정하면 해결됩니다.

 

버그3.  

이 버그는 커뮤니케이션캐스트 구독 목록의 본문에서 발생했던 버그입니다.

 11.gif

  이슈   word-wrap:break-word로 줄바꿈 처리를 할 경우, 영문/숫자 끝이 잘려 보입니다.
  이상 환경   IE6,7
  이상 화면

  다음과 같은 구조를 가진 HTML에서 제일 하위 요소에 word-wrap 속성이 지정되어 있고,
  하위 요소의
  두번째 상위 요소에 vertical-align 속성이 있으면 IE6,7에서 끝 문자가 잘려 보입니다. 

    HTML 코드 (꼭 li,div,p일 필요는 없습니다.)

<li class="sup"><div><p>텍스트</p></div></li>

     CSS 코드

.sup{width:30%;vertical-align:top}
.sup p{word-wrap:break-word}

   4_1.gif  

  정상 화면

 다른 브라우저에서에서는 오른쪽 끝 문자가 잘 보입니다. 

 5_1.gif

  해결 방안

  아래 중 한가지를 만족시키면 해결됩니다.

  1. 제일 하위 요소에 word-break:break-all 을 추가해줍니다.
  2. 두번째 상위 요소에 vertical-align 속성을 제거합니다.
  3. 첫번째 상위 요소(div)에 너비를 지정하거나 좌우 테두리를 지정합니다.

  네이버me에서는 2,3번을 지정하는 것이 불가능하여 1번으로 해결하였습니다.

 

버그4.

이 버그는 좌측메뉴 미니 주소록 열기/닫기, 미니 N드라이브 열기/닫기 버튼에서 발생했던 버그입니다.
10.gif

 

  이슈   PNG24 이미지를 사용한 디자인 버튼의 경우 커서 모양이 다르게 보입니다.
  이상 환경   IE6
  이상 화면

   상위 요소(span)에 PNG24 배경이 깔린 디자인 버튼 사용시 <button>에 cursor:pointer 속성을
  지정하
였음에도 불구하고 <span>에 사용된 filter 속성으로 인해 커서 모양이 바르게 표현되지 않습니다. 

   HTML 코드 (꼭 li,div,p일 필요는 없습니다.)

<span class="btn_fd" title="미니 주소록 열기"><button type="button"><span class="blind">미니 주소록 열기</span></button></span>

   CSS 코드

.btn_fd{width:19px;height:18px;background:url(PNG파일경로)undefined;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PNG파일경로',sizingMethod='image')}

.btn_fd button{width:19px;height:18px;border:none;background:none;cursor:pointer} 

    6.gif

  정상 화면

  다른 브라우저에서에서는 <button>에 지정된 cursor:pointer 속성을 바르게 표현합니다. 

.btn_fd{width:19px;height:18px;background:url(PNG파일경로)undefined;_background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='PNG파일경로',sizingMethod='image');cursor:pointer}

.btn_fd button{width:19px;height:18px;border:none;background:none;cursor:pointer} 

   7.gif

  해결 방안

  상위 요소(span)에 cursor:pointer 속성을 지정합니다.

 

버그리포트를 마지막으로 약 3주간 진행되었던 네이버me 개발일지 작성을 마칩니다.
여러분의 마크업 개발에 조금이라도 도움이 되셨길 바라며, 더 유익한 글로 다시 돌아올 것을 약속드리겠습니다. ^^
그동안 펄님이었습니다~

 

댓글 0
댓글을 작성하려면 해주세요.