Извините, если это дурак; Я не нашел ни одного вопроса, который бы создавал такую же проблему.
Проблема проиллюстрирована на этом скриншоте, по иронии судьбы взятом из сайта блога CSS (он находится сразу под текстом «Чтобы установить контекст позиционирования».) Я сталкивался с той же проблемой в мой собственный код.
Примерно на полпути вниз по этому изображению есть строка с длинным комментарием, которая заставляет вмещающую div обеспечить горизонтальную полосу прокрутки (через настройку overflow: auto). Как показано на скриншоте, окружающие линии с серым фоном не имеют не растягивайте, чтобы заполнить всю ширину родительского холста. Вместо этого они остаются фиксированными по ширине области просмотра родительского элемента . (Эти фоны принадлежат div s, которые заключают отдельные строки текста.)
Я вижу это в Firefox 3.1 и IE8 (независимо от режима совместимости IE7.)
Существует ли какой-либо кросс-браузерный метод, чтобы заставить эти дочерние элементы div растягиваться на всю ширину холста (или, другими словами, установить их ширину равной максимальной ширине их пиров)? Я предполагаю «нет», иначе автор сайта использовал бы его.
(источник: outofwhatbox.com )
РЕДАКТИРОВАТЬ : Вот простой пример. По какой-то причине полоса прокрутки не отображается в IE, но она отображается в Firefox 3.1 (и с тем же поведением, что и в других местах).
Note: The CSS shown here is derived from SyntaxHighlighter
(http://alexgorbatchev.com/), released under GPL 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sample</title>
<style type="text/css">
.syntaxhighlighter .line.alt1 .content {
background-color:#FFFFFF !important;
}
.syntaxhighlighter .line .content {
color:#000000 !important;
display:block !important;
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
font-size: 12pt;
font-weight: 400;
color: #000000;
white-space: nowrap;
}
.syntaxhighlighter .line.alt2 .content {
background-color:#F0F0F0 !important;
}
.syntaxhighlighter {
background-color:#E7E5DC !important;
margin:1em 0 !important;
padding:1px !important;
width:497px !important;
height: auto !important;
}
.line {
overflow:visible !important;
}
.lines {
overflow-x:auto !important;
}
</style>
</head>
<body>
<div class="syntaxhighlighter" >
<div class="lines">
<div class="line alt1">
<span class="content">
<span style="margin-left: 0px ! important;" class="block">
<code class="plain">this is line 1 </code>
</span>
</span>
</div>
<div class="line alt2">
<span class="content">
<span style="margin-left: 20px ! important;" class="block">
<code class="plain">this is line 2</code>
</span>
</span>
</div>
<div class="line alt1">
<span class="content">
<span style="margin-left: 40px ! important;" class="block">
<code class="plain">this is a very very very very very very long line number 3</code>
</span>
</span>
</div>
<div class="line alt2">
<span class="content">
<span style="margin-left: 0px ! important;" class="block">
<code class="keyword">this is line 4</code>
</span>
</span>
</div>
<div class="line alt1">
<span class="content">
<span style="margin-left: 20px ! important;" class="block">
<code class="plain">and this is line 5.</code>
</span>
</span>
</div>
</div>
</div>
ОБНОВЛЕНИЕ 2009/05/14: Вот сценарий, который я развернул, основываясь на ответе brianpeiris ниже. Если кому-то интересно, вот более подробное описание необходимых изменений.
// Ensure that each content <span> is sized to fit the width of the scrolling region.
// (When there is no horizontal scrollbar, use the width of the parent.)
fixContentSpans : function() {
jQuery('.syntaxhighlighter > div.lines').each(function(){
var container = jQuery(this);
var scrollWidth = this.scrollWidth;
var width = jQuery(this).width();
var contents = container.find('.content');
jQuery(contents).each(function(){
var child = jQuery(this);
var widthAvail =
scrollWidth - parseFloat(child.css("margin-left"))
- parseFloat(child.css("padding-left"))
- parseFloat(child.css("padding-right"));
var borderLeft = parseFloat(child.css("border-left-width"));
// IE uses names (e.g. "medium") for border widths, resulting in NaN
// when we parse the value. Rather than trying to get the numeric
// value, we'll treat it as 0. This may add a few additional pixels
// in the scrolling region, but probably not enough to worry about.
if (!isNaN(borderLeft)) {
widthAvail -= borderLeft;
}
child.width(widthAvail);
});
});
},