選擇跨瀏覽器的元素比例，IE8除外

我試圖用窗口大小（調整大小）縮放select -element。這適用於FF3.6，Chrome 10，IE6（!!）和IE7，但是...不適用於IE8。選擇跨瀏覽器的元素比例，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：

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呈現在怪異模式（即沒有DOCTYPE），一切順利，因爲那時它像IE7 。然而，這不是一個可以滿足的解決方案:-)

我已經通過論壇搜索，但是我沒有找到類似的問題。我也嘗試使用CSS3屬性resize（resize:both; overflow:auto）無濟於事。

誰能幫助指引我正確的方向，以便所有瀏覽器仍按比例調整它包括 IE8？

來源

2011-01-21 fibbers

poepje指出我在正確的方向。唯一缺少的是保持相同數量的左右位置（因爲寬度 - ％）。
用另一個div包裝select，顯示預期結果。 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%; 
}

來源

2011-01-24 09:22:56 fibbers

這工作：

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屬性可以使用百分比元素。

來源

2011-01-21 15:46:25 poepje

謝謝！這被證明是可行的（差不多）！除了現在不遵守它的左右屬性，因爲它保持寬度的百分比。看到我的答案，你的帶領我，這完全適合我的問題。 – fibbers 2011-01-24 09:28:04

有左，右的定位，你的意思是你想它居中？在這種情況下，我會嘗試以下情況之一：

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;

，因爲這似乎是neccesary有時（如果你問我，那麼在css中有一種奇怪的東西）。

希望這有幫助，如果你的意思別的只是這麼說;）

來源

2011-02-05 15:36:57 poepje

選擇跨瀏覽器的元素比例，IE8除外

回答

相關問題