이 블로그에는 현재 지난주에 공개된 Book Club이라는 스킨이 적용되어 있습니다. Book Club 스킨에서 사이드바에 '최근 댓글' 위젯을 표시하면 댓글들이 리스트 불릿(List Bullet) 없이 표시되어 댓글들을 구분하는 것이 조금 불편하게 되어 있습니다.
댓글들을 쉽게 구분할 수 있도록 리스트 불릿(리스트 마커)를 CSS로 추가해보았습니다. 하지마 크롬에서는 리스크 불릿이 정상적으로 표시되었지만 IE에서는 불릿 뒤에 줄바꿈(line-break)이 추가되어 엉성하게 보였습니다.
이 문제에 대해 리서치해보니 문제의 원인이 댓글에 적용된 링크(hyperlink) 때문이라는 것을 알게 되었습니다. 다음과 같이 anchor 요소에 display: inline;을 적용하니 문제가 해결되었습니다.
ul li a {
display: inline;
}
이제 IE에서도 리스트 불릿이 정상적으로 표시되는 것 같습니다.
참고로 이와 유사한 문제를 작년 말에도 경험한 적이 있습니다. 문제를 해결하느라 조금 시간이 걸렸던 기억이 납니다. 당시에는 비슷하지만 조금 다른 접근법으로 리스트 불릿을 추가했습니다.