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에선 object는 height도 line-height도 안먹는단 말이다!
이건 뭥미?
Posted by mkyoon
Trackback URL : http://mkyoon.com/trackback/90
