Select 요소는 IE8을 제외한 브라우저 간 비례 조정

Question

select -element를 창 크기 (크기 조정시)로 축척하려고합니다. FF3.6, Chrome 10, IE6 (!!) 및 IE7에서는 잘되지만 IE8에서는 그렇지 않습니다.

특정 코드 단편의 데모는 http://jsfiddle.net/yKVbr/5/에서 찾을 수 있습니다.
즉 :
HTML :

<div id="wrap"> 
    <select> 
     <option value='field1'>Datum gereed</option> 
     <option value='field2'>Korte omschrijving</option> 
     <option value='field3'>Taak Code</option> 
     <option value='field4'>Project omschrijving</option> 
    </select> 
</div> 

CSS : 다음은 IE7처럼 동작하기 때문에

div { 
    position: absolute; 
    left: 10px; 
    right: 96px; 
    width: auto; 
    width: -moz-availble; 
    width: expression(document.body.clientWidth-(10+96)); 
    top: 134px; 
    height: 18px; 
    background-color: yellow; 
} 

select { 
    position: absolute; 
    left: 25px; 
    right: 90px; 
    width: auto; 
    width: -moz-available; 
    width: expression(wrap.style.pixelWidth-(25+90));); 
    top: -2px; 
    height: 16px; 
} 

IE8의 (a DOCTYPE없이 IE) 쿼크 모드에서 렌더링, 그것을 잘 간다 . 그러나 이것은 만족스러운 해결책이 아닙니다 :-)

나는 포럼을 통해 검색했지만 유사한 문제를 발견하지 못했습니다. CSS3 속성 resize (resize:both; overflow:auto)으로 작업 해 보았습니다.

누가 올바른 방향으로 나를 가리켜줌으로써 모든 브라우저가 여전히 정확하게 조정할 수 있습니까? IE8?

Answer 1

poepje가 올바른 방향으로 나를 가리켰다. 누락 된 유일한 것은 왼쪽과 오른쪽 위치의 동일한 양을 유지하는 것입니다 (너비 - % 때문).
select을 다른 div로 감싸는 것은 의도 한 결과를 보여줍니다. IE8 은을 div 요소를 왼쪽 및 오른쪽 속성과 관련하여 올바르게 렌더링하므로 select 스타일의 대부분을 div 주변으로 이동하고 선택하려면 width:100% 만 설정할 수 있습니다.

새로운 데모가 http://jsfiddle.net/yKVbr/8/에서 찾을 수 있습니다 예 :
HTML :

<div id="wrap"> 
    **<div id="innerwrap">** 
     <select> 
      <option value='field1'>Datum gereed</option> 
      <option value='field2'>Korte omschrijving</option> 
      <option value='field3'>Taak Code</option> 
      <option value='field4'>Project omschrijving</option> 
     </select> 
    **</div>** 
</div> 

CSS : 왼쪽과 오른쪽 위치와

div#wrap {..same as before..} 
div#innerwrap { 
    position: absolute; 
    left: 25px; 
    right: 90px; 
    width: auto; 
    width: -moz-available; 
    width: expression(wrap.style.pixelWidth-(25+90));); 
    top: -2px;  
} 

select { 
    position: absolute; 
    height: 16px; 
    width: 100%; 
} 

Answer 2

이 작동 : 내가 여기에 무슨 짓을

div { 
    position: absolute; 
    left: 10px; 
    right: 96px; 
    width: auto; 
    width: -moz-availble; 
    width: expression(document.body.clientWidth-(10+96)); 
    top: 134px; 
    background-color: yellow; 
    width:80%; 
    height:20px; 
} 

select { 
    position: absolute; 
    left: 25px; 
    right: 90px; 
    width: auto; 
    width: -moz-available; 
    width: expression(wrap.style.pixelWidth-(25+90));); 
    top: -2px; 
    width: 100%; 
} 

는 폭에 대한 비율을 사용합니다. 그러나 width 속성 만 백분율 요소를 사용할 수 있습니다.

Answer 3

, 당신은 당신이 원하는 의미합니까 중심? 이 때로는 neccesary 것으로 보이기 때문에 (

div#wrap { /* or innerwrap, whatever suits you best */ 
    margin: auto; 
} 

나 또한

div#wrap { 
    margin: x%; /* where the x is to be replaced by a number that's dependable on the width of the elements*/ 
} 

, 당신은 재산을

position:relative; 

을 명시해야 할 수도 있습니다 :이 경우 난 다음 중 하나를 시도 할 것이다 kindof 당신이 나에게 묻는다면 CSS의 이상한 물건).

호프가 도움이 되었으면 좋겠다. 다른 말로만하면된다.)