Выбор масштабирования элементов кросс-браузер, кроме IE8 - PullRequest
Новая
       0

Выбор масштабирования элементов кросс-браузер, кроме IE8

0 голосов
/ 21 января 2011

Я пытаюсь масштабировать 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?

Ответы [ 3 ]

2 голосов
/ 21 января 2011

Это работает: 

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 может использовать элемент процента.

1 голос
/ 24 января 2011

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%;
}
0 голосов
/ 05 февраля 2011

Имея в виду левое и правое позиционирование, вы хотите, чтобы оно было отцентрировано?В этом случае я бы попробовал одно из следующего: 

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, если вы спросите меня).

Надеюсь, это помогло, если вы имели в виду что-то еще, просто скажите;)

...