MaKeYOurOwN mkyoon

IE에서 지원되는 CSS 목록은 다음에서 확인할 수 있다.

<select> http://msdn2.microsoft.com/en-us/library/ms535893.aspx
<option> http://msdn2.microsoft.com/en-us/library/ms535877.aspx

그리고 다음 문구도 확인할 수 있다.

- option Object Remarks -
Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.

option 엘리먼트에는 오직 배경색과 글씨색만 바꿀 수 있다는 얘기다.
그래. 원래 IE에는 기대조차 안하고 있었으니 그렇다 치자.

하지만 "신기한" 현상을 목격해버렸..-_-
예제 파일을 만들어 보았으니 같이 함 보십시다.

- 예제 File Link 1 - select_euckr.html (ASCII / EUC-KR)
- 예제 File Link 2 - select_utf8.html (UTF-8)

두개의 문서의 차이는 단 하나. 인코딩-_-

select_euckr.html은 저장할 때 파일형식을 ASCII (notepad에선 ANSI)로 저장했고
select_utf8.html은 저장할 때 파일형식을 UTF-8로 저장했다.
물론 각각 character set(EUC-KR, UTF-8)도 알맞게 넣었다.

그럼 소스코드를 확인해보자.

<!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 또는 utf-8" />
<title>ASCII / EUC-KR 또는 UTF-8</title>
<style type="text/css">
body { font-family: Tahoma; }
select { 
    width: 120px; 
    height: 200px;
    padding: 5px; 
    background: #ff0;
    color: #f00;
    font-family: Dotum; 
    font-size: 12px;
    line-height: 2em;
}
option.test {
    height: 20px;
    margin: 5px;
    padding: 10px;
    background: #000 url(http://mkyoon.tomeii.com/mstar.gif) no-repeat 0 0;
    color: #0ff;
    font-family: Gungsuh;
    font-size: 16px;
    line-height: 2em;
}
</style>
</head>
<body>
<h1>EUC-KR 또는 UTF-8</h1> 
<select size="5">
    <option>IE 좀맞을래연</option>
    <option class="test">IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option class="test">IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option class="test">IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option class="test">IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
    <option>IE 좀맞을래연</option>
</select>
</body>
</html>

두개 링크를 각각 IE(6,7다 똑같음-_-)와 FF에서 열어보면 다음과 같다.

- IE -

스타일 먹은거라곤
select : background-color, color, font-family, font-size, height, width
object : background-color, color 끝.

- FF -

select : background, color, font-family, font-size, height, line-height, padding, width
object : background, color, font-family, font-size, height, line-height, margin, padding
스타일 다 먹어주시고~ 훗-_-

여기서 끝이 아니라.
IE 스크린샷을 한번 보자. 뭔가 이상하지 않은가.
문서 인코딩 형식을 바꿨다고 저렇게 줄간격이 바뀌어도 되는건가?
IE에선 option은 height도 line-height도 안먹는단 말이다!

이건 뭥미?

IE는 utf-8 인코딩에서 문자 높이가 작아지는 현상이 있다고 한다.
결국 select 폰트크기를 좀더 크게 하여 해결함.

Posted by mkyoon

MaKeYOurOwN mkyoon

Search Results for 'object'

2 POSTS

Flash OBJECT and EMBED tag attributes

IE의 Select 콤보 박스와 CSS 그리고 Encoding

Notices

Categories

Tag Cloud

Recent Posts

Site Stats