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

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

Answer 2

poepje指出我正确的方向。唯一缺少的是保持相同数量的左右位置（因为宽度 - ％）用另一个div包装select会显示预期的结果。 IE8 确实正确地渲染div元素及其左右属性，以便大多数select样式可以移动到周围的div并且只设置{ {1}}用于选择。

新的演示可在http://jsfiddle.net/yKVbr/8/上找到，即：的 HTML ：

width:100%

<强> CSS ：

<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>

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中有点奇怪）。

希望这有帮助，如果你的意思是其他的话就这么说;）

选择元素比例跨浏览器，IE8除外

3 个答案: