Как я могу остановить IE 7 от игнорирования моего значения ширины и обработки элемента как блока, когда я устанавливаю дополнение?

Изолированный тестовый сценарий (просмотр в IE 7 или IE 8/9 в режиме IE 7)

Просмотр этой страницы в IE 7 вызывает игнорирование моего значения ширины. Если вы удалите значение прокладки, ширина будет правильно применена, но когда вы добавите в дополнение, это приведет к тому, что вся страница будет расти, и обрабатывает заполнение почти как маржу. Чем больше ширина страницы, тем больше пустое пространство справа от элемента. Я не смог найти, что это такое, и, что более важно, как его исправить. Кто-нибудь видел это и кто-нибудь знает решение?

Вещи, которые я пробовал до сих пор:

  • zoom Исправить
  • display: inline-block (рекомендуется для проблемы с двойной вертикальной прокладкой)
  • Это не line-height (это проблема ширины...)

Снимок экрана:

Этот div должен охватывать всю ширину страницы, и не более, но вы увидите полосу прокрутки здесь: И результат прокрутки вправо: Этого не должно быть.

Изучение элемента в инструментах браузера показывает ширину, которая должна быть неверно полной шириной страницы, а не полной шириной минус заполнение.

6 ответов

Отказ от ответственности: я проигнорирую функциональное требование и ваши комментарии к другим ответам и просто сконцентрируюсь на конкретной проблеме.

Эта специфическая проблема IE7 вызвана использованием смещения (например, top, right, bottom или left) на относительно позиционированном элементе. Если вы смещаете относительно позиционированный элемент, тогда он в основном сохранит все пространство своего исходного положения. Обратите внимание, что это не происходит, если компенсировать абсолютно позиционированный элемент.

Перед тем, как применяется смещение left, относительно позиционированный элемент из-за его ширины и правильного заполнения полностью выходит из окна просмотра и, следовательно, будет генерироваться горизонтальная панель scollbar. После того, как смещение left применяется к относительно позиционированному элементу, вы в основном оставляете пространство того же размера, что и смещение на другой стороне смещения, все еще находящееся за пределами области просмотра.

Поврежденный веб-браузер во время перерисовки, однако, обнаруживает, что ничего не видно за пределами области просмотра и, следовательно, снова скрывает полосу прокрутки. Однако IE7 не настолько умен и сохраняет полосу прокрутки.

В конце концов, использование смещения left было технически неправильным решением. Вы должны на первом месте использовать margin-left вместо left. В отличие от смещения, маржа не оставляет пустое место в исходном положении, но на самом деле подталкивает весь элемент в нужное положение.

Итак, вот как исправлен ваш script:

$('#el').css({
 'width': document.body.scrollWidth - 200,
 'padding-right': 200,
 'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});

Кстати, мне интересно, как это float: left; имеет смысл в этой конструкции, в которой вы, по-видимому, хотите имитировать ширину 100%. Вероятно, это будет для других целей, не видимых в конкретном примере.


Исправлено исходное сообщение, когда оно было выключено милями.

изменить

Протестирован в IE7 с песочницей, и он работает. (что я могу сказать, я ухожу от своего пути, чтобы получить что-то совершенное, также здесь новый, так что щедрость действительно поможет быть очень честным), чтобы также отметить, что он работает изначально в IE7, IE8 и IE9, FF3.6, Opera 10 и должен работать в Safari без проблем, Chrome не упоминался как мой браузер по умолчанию, и он работает, не сомневаюсь.

Вот JS:

function resize () {
$('#el').trigger('resize').width('100%');
}
resize();

и CSS:

#container {
 width: 320px;
 border: 1px solid #000000;
 min-height: 500px;
 margin: 0px auto;
}
#el {
 background-color: #FFFF00;
 min-height: 45px;
 width: 100%;
 position: absolute;
 left: 0;
}


Вы можете решить эту проблему, не используя javascript для вычисления ширины и без заполнения, вместо этого используйте position: absolute. Здесь обновленная скрипка. Он будет работать в любом браузере

#el {
 background-color: #FFFF00;
 min-height: 45px;
 width: 100%;
 position: absolute;
 left:0;
 right: 0;
 top: 0;
}

http://jsfiddle.net/LRpHq/7/


У меня была эта проблема с реализацией skeleton.css. В частности, мой #header занимал ширину body, которая занимала ширину html. Оставшийся контент имел ширину набора 978px. Поэтому, когда окно было меньше 978, фон заголовка будет отображаться только в ширину окна просмотра. т.е. - если вы начали рендеринг на ширине 500, то получилось бы все более широкое #header. Перетаскивание более широкой ширины окна просмотра не имело проблем, но правая прокрутка уменьшала заголовок до размера исходного видового экрана.

Мое исправление: html,body { min-width:978px } /* your width may vary */


Поскольку вам кажется, что вы используете Javascript, настройте функцию resize():

function resize () {
 $('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}


Я нашел решение для аналогичной проблемы здесь. посмотрите, поможет ли она вам.

licensed under cc by-sa 3.0 with attribution.