选择跨浏览器缩放元素，IE8 除外

Question

我正在尝试使用窗口大小（调整大小时）缩放 select 元素。这适用于 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：

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 在 Quirksmode 下呈现时（即没有 DOCTYPE），它会很顺利，因为它的行为就像 IE7 一样。然而，这不是一个令人满意的解决方案:-)

我已经在论坛中进行了搜索，但没有发现类似的问题。 我还尝试使用 CSS3 属性 resize (resize:both; Overflow:auto) 但无济于事。

谁可以帮助我指出正确的方向，以便所有浏览器仍然可以正确缩放包括 IE8？

Answer 1

这是可行的：

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%;
}

我在这里所做的是使用宽度百分比。但请记住，只有宽度属性可以使用百分比元素。

Answer 2

波普杰为我指明了正确的方向。唯一缺少的是保持相同数量的左右位置（因为宽度％）。
用另一个 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%;
}

Answer 3

左右定位，你的意思是你想要它居中吗？在这种情况下，我会尝试以下操作之一：

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;

，因为这有时似乎是必要的（如果您问我，这在 css 中有点奇怪）。

希望这对您有所帮助，如果您有其他意思，请直接说出来；）